Bootstrap 4截断文本显示至少两行

Question

我有一个段落试图通过 bootstrap class 截断它text-truncate。在输出中我只得到一行。

<p class="text-truncate" style="max-width:300px;">
    Resize the browser window to see that its width (max-width) will change at different breakpoints.Resize the browser window to see that its width (max-width) will change at different breakpoints
</p>

获取输出

Resize the browser window to see that its wid...

期待输出

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

在内联CSS中我尝试过-webkit-line-clamp: 2，得到相同的结果。如何使用 bootstrap 获得多行text-truncate？

Answer 1

没有直接内置到 Boostrap4 中，但这是来自CSS 技巧的方法- Bootstrap 的代码看起来像是专门为 1 行构建的。此方法，需要在父元素处设置宽度。

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<div class="text-truncate-container"><p class="text-truncate">Resize the browser window to see that its width (max-width) will change at different breakpoints.Resize the browser window to see that its width (max-width) will change at different breakpoints.</p></div>