兩行文字和溢出虛線

有沒有什麼方法可以在兩行顯示文本，並且溢出點是虛線？我可以使用兩行文字和溢出虛線

white-space: nowrap; 
text-overflow: ellipsis;

但它顯示在一行中的文本。我需要在兩行顯示我的文本，如果溢出文本，那麼它應該顯示虛線結束。

來源

2017-06-04 Md. Shougat Hossain

這可能有所幫助：https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines?rq=1 –

工作CSS解決方案是：

display: -webkit-box; 
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical; 
overflow: hidden; 
text-overflow: ellipsis;

您可以將2更改爲任意數字。它會在末尾顯示X個文本和點數

line-clamp並非所有瀏覽器都支持。 https://caniuse.com/#search=line-clamp

來源

2017-06-04 05:02:15

是否有任何解決方案的Firefox？ –

據我所知，FF沒有優雅和純粹的CSS解決方案。它可以是這樣的https://codepen.io/romanrudenko/pen/ymHFh –

@VictorLeontyev你還必須包括瀏覽器對線夾的支持。 – frnt

在css設置元素的width，white-space到pre

div { 
 
    font-size: 1em; 
 
    display: inline-block; 
 
    width: 2em; 
 
    white-space: pre; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<div>lines of 
 
breaks</div>

來源

2017-06-04 04:49:31 guest271314

刪除White-space屬性和使用元素的高度

爲Chrome，Safari和Opera

來源

2017-06-04 04:56:51

兩行文字和溢出虛線

回答

相關問題