我正在使用flexbox在Bootstrap卡上工作,无法截断文本。卡中的文本将按预期方式自动换行,但是,如果没有足够的空间,卡标题不会被截断,而是将内容压入卡外(see screenshot)。
谁能解释为什么会这样?
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card d-flex flex-row">
<a href="#">[Image]</a>
<div class="card-body d-flex align-items-center">
<div class="flex-grow-1">
<a href="#"><h5 class="card-title text-truncate">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h5></a>
<div class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
</div>
<small class="align-self-baseline text-nowrap">Lorem ipsum</small>
<div>[Icon]</div>
</div>
</div>
</div>
</div>
</div>
添加弹性体:
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card d-flex flex-row">
<a href="#">[Image]</a>
<div class="card-body d-flex align-items-center">
<div class="flex-grow-1">
<div class="flex-body">
<a href="#"><h5 class="card-title text-truncate">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h5></a>
<div class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
</div>
<small class="align-self-baseline text-nowrap">Lorem ipsum</small>
<div>[Icon]</div>
</div>
</div>
</div>
</div>
</div>
</div>