Question

我有以下html - http://jsfiddle.net/o8e4n30n/

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        <span class="txt">Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadsodio asdasda sdas dasdasdasda sdadadsads</span>
    </li>
</ul>

我想使用文本溢出省略号属性，以便只显示一行...而不是现在显示的3行

即来自

Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadsodio asdasda sdas dasdasdasda sdadadsads

到

Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasd ...

请建议。

Answer 1

我updated your fiddle添加了必要的样式：

.list-group-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

文本必须在一行（因此是white-space: nowrap），并溢出一个隐藏溢出的框（因此overflow: hidden）。

我已经在list元素上应用了样式，因为它默认是块级元素。如果您要在span上应用它，则必须添加display: block规则，或添加display: inline-block规则以及相关联的width。

Answer 2

您必须为文本溢出的元素定义特定的宽度和溢出：省略号。

怎么样：

.list-group-item {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

按照此link了解详情。

这是一个可以玩的Fiddle。

Answer 3

使用：

text-overflow: ellipsis;
text-wrap:nowrap;
overflow:hidden;

希望有所帮助

如何使用文本溢出：省略号？

3 个答案: