html - 如何使用文字溢出:省略号？

我有以下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>

我想使用text-overflow省略号属性，以便仅用...显示一行，而不是现在显示的3行

即来自


  
    信用评级机构胡斯托申通快递奥迪奥asdasda SDAS dasdasdasda sdadadsadssto奥迪奥asdasda SDAS dasdasdasda sdadadsadssto奥迪奥asdasda SDAS dasdasdasda sdadadsadsodio asdasda SDAS dasdasdasda sdadadsads
  


至


  
    Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto dios asosda sdas dasdasdasd…
  


请指教。

最佳答案

我已经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规则。

关于html - 如何使用文字溢出:省略号？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25469780/