省略号未显示。日wassup？

http://jsfiddle.net/gKwb2/省略号未显示。日wassup？

参见上文。我已经尝试过许多小时，现在转向你们，希望你们可以有一个简单的解决方案。

我想显示省略号的第二个盒子溢出文本。

任何建议非常感谢！

我的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;}

来源

2014-01-15 user3200202

我不相信这是可能的，以示对换行文本的省略号。 Quirksmode says：

text-overflow发挥作用，只有当：

盒具有overflow以外visible（与overflow: visible的文本只是流出箱）

盒子具有white-space: nowrap或约束文本布局方式的类似方法。（如果没有这一点，文本将换到下一行）

来源

2014-01-15 22:20:47 RichieHindle

有此一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跨浏览器解决方案

来源

2014-01-15 22:40:29 Danield

省略号未显示。日wassup？

回答

相关问题