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

Question

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

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

如您所见，文本有一个固定的宽度。 我想在不明确设置宽度并使用引导列的情况下这样做。

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

这里是相关代码。

<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
}