并保留与 div 高度相适应的尽可能多的文本行。
并保留与 div 高度相适应的尽可能多的文本行。
<div class="row g-0">
<div class="col-md-3 align-content-center">
<div class="d-flex justify-content-center">
<!-- svg image -->
</div>
</div>
<div class="col-md-9 align-content-center">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
</div>
</div>
因此我想要的是：
| | Lorem ipsum dolor |
| SVG | sit amet, |
| | consectetur ad... |
我正在使用所有这些属性，但无法达到理想的效果。
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: inherit;
position: absolute;
有没有可能的解决方案？如果有，是否只能使用 Bootstrap 类来解决？
谢谢。
该类 text-truncate 的作用与 text-truncate-alt-1 下面定义的未使用的类相同。
定义的 CSS 规则未被使用，但这里提供替代方法。
.text-truncate-alt-1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-truncate-alt-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row g-0">
<div class="col-md-3 align-content-center">
<div class="d-flex justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg"
height="140" width="150" style="background:rgba(0, 0, 0, 0.2)">
<polygon points="75,7.5 129,38.5 129,101 75,132.5 21,101 21,38.5" style="fill:lime;stroke:green;stroke-width:1.5" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
</div>
<div class="col-md-9 align-content-center">
<h5 class="card-title text-truncate">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h5>
</div>
</div>