CSS word-break與文本溢出相結合

所以我想結合word-break和text-overflow它確實在某些時候工作，但不是它應該如何。CSS word-break與文本溢出相結合

例如，我已經建立了這個Fiddle

CSS：

width: 200px; 
padding: 8px; 
border:1px solid blue; 
word-break: break-word; 
height: 100px; 
overflow: hidden; 
text-overflow:ellipsis; 
white-space:nowrap;

爲了澄清，一旦文本被打破，部分應填寫框，並在文本的結尾應該有3個點。目前只有一條線路在哪裏工作。

來源

2012-12-15 Linas

FWIW：有一個[提案和討論]（http://lists.w3.org/Archives/Public/www-style/2012Jan/0627。 html）在[email protected]郵件列表中使用文本溢出多行文本。 –

據我所知，這是不可能的使用CSS。

您唯一能做的就是指定height和overflow:hidden。（最後沒有省略號。）

這在W3 spec for text-overflow中說明。

省略號
省略號串被插在其中文本溢出發生每個框邊界。這些省略號字符串的值是由'text-overflow-ellipsis'屬性確定的。該插入發生在行文本
的最後一個完整的標誌符號表示的邊界...
換句話說，文本溢出模式隻影響一個塊級元素其參與的文本內容它自己的內聯流程。

您將需要使用JavaScript來實現此目的。

這裏是一個jQuery插件的示例：http://pvdspek.github.com/jquery.autoellipsis/

來源

2012-12-15 19:02:50

CSS word-break與文本溢出相結合

回答

相關問題