Question

见上文。我已经尝试了几个小时，现在转向你们，希望你们有一个很好的解决方案。

我正在尝试显示第二个包含溢出文本的框的省略号。

任何建议都非常感谢！

我的CSS：

.row-fluid { width: 95%; margin: auto; display: inline-block; height:100px; }

.span4 { 
    height:100px; 
    width: 100px; 
    float:left; 
    background: green; 
    border-bottom:solid 1px #fff;}

.container-fluid { 
    margin-left: 100px; 
    background: orange; 
    height:100px; 
    padding:0px;   
    overflow: hidden; 
    text-overflow: ellipsis;

}

div { padding: 0px;}

Answer 1

我不相信可以为包装文本显示省略号。 Quirksmode says：

text-overflow仅在以下情况下发挥作用：


该框的overflow除visible以外overflow: visible   文字只是开箱即用）

该框有white-space: nowrap或a   限制文本布局方式的类似方法。（无   这个，文本将换行到下一行）

Answer 2

有一个针对此的webkit解决方案，它被称为-webkit-line-clamp

只需将以下类添加到您的标记中，它就可以在webkit浏览器中使用

<div class="container-fluid line-clamp">text</div>

FIDDLE （在webkit浏览器上查看）

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5; /* ellipsis on the 5th line of text */
  -webkit-box-orient: vertical;  
}

还有一个css-tricks article讨论了这一点。

如果你正在寻找一个跨浏览器的解决方案......好吧，我担心 - 到目前为止 - 没有一个。

虽然有过相当接近的尝试。

据我所知，this article最接近纯css跨浏览器解决方案

省略号没有显示。日wassup？

2 个答案: