html - 如何在保持响应的同时截断文本

Question

我不知道如何响应式截断文本。 我见过的例子证明了这样的事情

.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
{

如您所见，文本有一个设置宽度。 我想在不显式设置宽度的情况下使用 Bootstrap 列来执行此操作。

我发现了一个示例，其中文本以响应方式被截断，但它使用了我不想使用的表格。 有什么方法可以在没有表格的情况下做到这一点吗？

这是相关代码。

<div class="row">
<div class="col-xs-2 vcenter">
    <img class="valign" src="http://s13.postimg.org/ih41k9tqr/img1.jpg" alt="">
</div><!-- This comment between lines 40 and 41 MUST be here for the vcenter class to work as intended.
--><div class="col-xs-10 vcenter">
    <div class="row">
        <div class="col-xs-7 col-lg-8">
            <span class="name">Thomas Bangalter</span>
        </div>
        <div class="col-xs-5 col-lg-4">
            <span class="time">2:09 PM</span>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-overflow">
            <span class="preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </div>
    </div>
</div>

我在这里创建了一个有限的演示: https://jsfiddle.net/zmfxcan5/

我想在一行后截断 lorem ipsum 文本。 如果窗口缩小，我希望文本在更少的字符后被截断。

Answer 1

我找到了这个问题的答案。 您只需使用以下 CSS 实现一个类。

.truncate{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}