省略號未顯示。日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？

回答

相關問題