如何在兩行文本之後才使用CSS文本溢出？

我意識到這個問題與另一個問題（Wrap a text within only two lines inside div）基本相同，但是，該線程中的所有答案都沒有爲我正確工作。如何在兩行文本之後才使用CSS文本溢出？

我的情況歸結爲：我有一個固定寬度和固定高度的DIV，但是是一個可變長度文本的容器。如果長度超過第一行，則應該換行到第二行;如果文本超出第二行，則應該用橢圓截斷。

到目前爲止，我使用了以下內容：

.name { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    height: 20px; 
    line-height: 10px; 
    width: 64px; 
}

但是，很明顯是不換行;通過一些更改，我可以將它包裝到第二行，但是當它超出此範圍時，不會應用省略號。

只要在另一個線程中發佈的答案this one最接近，但它將橢圓應用於兩行文本，而不僅僅是第二行。

有沒有辦法做到這一點只使用CSS，或者我將不得不通過JavaScript來完成這個？

來源

2013-06-26 jszpila

這是一個非常好的問題，但我不認爲有一個很好的答案。從cimmanon鏈接和bažmegakapa的答案可能會是我的選擇，因爲解決方案像使用僞裝:after添加...看起來很俗氣。即使您可以找到解決方案，它也可能依靠使用供應商前綴，這會降低較小瀏覽器的體驗。 jQuery選項可能並不理想，但它應該跨平臺工作。

來源

2013-06-26 17:54:48

你必須在底角用僞元素覆蓋文本來僞造它。 text-overflow:ellipsis適用於單行。

來源

2013-06-26 17:33:16

如何在兩行文本之後才使用CSS文本溢出？

回答

相關問題