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
}

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

1 个答案: