有沒有什麼方法可以在兩行顯示文本,並且溢出點是虛線? 我可以使用兩行文字和溢出虛線
white-space: nowrap;
text-overflow: ellipsis;
但它顯示在一行中的文本。我需要在兩行顯示我的文本,如果溢出文本,那麼它應該顯示虛線結束。
有沒有什麼方法可以在兩行顯示文本,並且溢出點是虛線? 我可以使用兩行文字和溢出虛線
white-space: nowrap;
text-overflow: ellipsis;
但它顯示在一行中的文本。我需要在兩行顯示我的文本,如果溢出文本,那麼它應該顯示虛線結束。
工作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
是否有任何解決方案的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>
刪除White-space
屬性和使用元素的高度
這可能有所幫助:https://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines?rq=1 –