背景
有時(shí)候?yàn)榱隧?yè)面美觀(guān)魏宽，對(duì)于比較長(zhǎng)的標(biāo)題或簡(jiǎn)介內(nèi)容，會(huì)希望溢出的內(nèi)容用省略號(hào)代替决乎。這么做雖然降低了用戶(hù)體驗(yàn)队询，但是視覺(jué)上會(huì)比較整潔。
方案
單行文本溢出省略
<p class="txt">這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介</p> <style> .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style>
多行文本溢出省略
<p class="txt2">這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介這是一段簡(jiǎn)介</p><style> .txt2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 設(shè)置溢出行數(shù) */ }</style>
如果在項(xiàng)目中使用了scss构诚，可以編寫(xiě)一個(gè)mixin來(lái)處理
@mixin ellipsis($line: 1) { overflow: hidden; text-overflow: ellipsis; @if $line==1 { white-space: nowrap; word-wrap: normal; } @else { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $line; }}
注意： 這是一個(gè)非標(biāo)準(zhǔn)屬性蚌斩，但是得到了各大瀏覽器的支持（除了IE）
參考文檔1：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
如何實(shí)現(xiàn)溢出文本省略號(hào)首發(fā)于聚享小站，如果對(duì)您有幫助范嘱，不要忘記點(diǎn)贊支持一下呦??
