html - 如何使用文本溢出:ellipsis?

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 的框(因此 overflow: hidden) .

我在列表元素上应用了样式，因为默认情况下它是 block 级元素。如果你想在 span 上应用它，你必须添加一个 display: block 规则，或者添加一个 display: inline-block具有关联的 width 的规则。