html - Bootstrap 4 'text-truncate' 类定位下面的文本
问题描述
如果标题太长,我会尝试在标题上添加省略号。我想尊重响应式布局,我不想将固定宽度添加到card-title。
我使用文本截断在卡片标题上添加省略号。
卡片在列中以使用文本左侧的图像。
<div class="container">
<div class="row">
@foreach($posts as $post)
<div class="col-lg-6 p-1">
<div class="card border-0">
<div class="row no-gutters">
<div class="col-auto">
<img src="{{ $post->featured_image ? $post->featured_image : '/images/placeholder-image.png' }}" class="img-fluid" width="150" height="150" alt="{{ $post->title }}" style="width: 150px; height: 150px; object-fit: cover;">
</div>
<div class="col">
<div class="card-body">
<h3 class="card-title text-truncate">{{ $post->title }}</h3>
<p class="card-text m-0">{{ $post->short_summary }}</p>
<small>{{ $post->published_at->format('M d') }} — {{ $post->read_time }}</small>
</div>
</div>
<a href="{{ route('post', $post->slug) }}" class="stretched-link"></a>
</div>
</div>
</div>
@endforeach
</div>
</div>
但是如果我添加text-truncate类,标题和内容就会下降。
解决方案
你失踪overflow: hidden;
了<div class="col">
。如果在使用 flexbox 时不将其父容器的溢出设置为隐藏,则内容将始终占据其全宽。
.col-special {
overflow: hidden;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-6 p-1">
<div class="card border-0">
<div class="row no-gutters">
<div class="col-auto">
<img src="https://via.placeholder.com/150x150" class="img-fluid" width="150" height="150" alt="{{ $post->title }}" style="object-fit: cover;">
</div>
<div class="col col-special">
<div class="card-body">
<h3 class="card-title text-truncate">Comment écrire une "story" complète ?</h3>
<p class="card-text m-0">Une story, c'est en faite, simplement une histoire qui racoute ce que vous voule...</p>
<small>Apr 07 — 1 min read</small>
</div>
</div>
<a href="{{ route('post', $post->slug) }}" class="stretched-link"></a>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- android - MVP 组件的生命周期是什么?
- java - 我可以使用lamba experssion通过CDI策略模式动态获取ejb吗?
- python - scipy中的等间距样条评估
- node.js - MongoDB GridFS,下载图像总是只返回一组图像中的最后一个图像
- asp.net-core-webapi - 为 .NET Core Web API 设置 OpenID Connect
- matlab - MATLAB中的行向量右除
- android - ConstraintLayout 如何打包保持相同的距离比率
- c# - 将字符串转换为 int C#
- python - tkinter tkcalendar 显示事件
- angular - 从 html 响应中解析数据