這篇文章深入討論了在css中裁剪多行文本的方法，以提高網(wǎng)頁的外觀和用戶體驗(yàn)。作者首先介紹了常見的CSS文本裁剪技術(shù)，例如使用text-overflow和overflow屬性。然后，他引入了新的CSS屬性line-clamp，它可以更輕松地裁剪多行文本并添加省略號(hào)。作者解釋了如何使用line-clamp屬性設(shè)置最大行數(shù)，并指出了一些需要注意的注意事項(xiàng)。
AICube 開放GPT-4給大家使用以及AI工具助手，可以簡化大家生圖的的prompt
這篇文章深入討論了在CSS中裁剪多行文本的方法，以提高網(wǎng)頁的外觀和用戶體驗(yàn)。作者首先介紹了常見的CSS文本裁剪技術(shù)，例如使用text-overflow和overflow屬性。然后，他引入了新的CSS屬性line-clamp，它可以更輕松地裁剪多行文本并添加省略號(hào)。作者解釋了如何使用line-clamp屬性設(shè)置最大行數(shù)，并指出了一些需要注意的注意事項(xiàng)。
接下來，作者提供了一些使用line-clamp屬性時(shí)可能遇到的限制和兼容性問題，并分享了一種使用JAVAScript 庫進(jìn)行文本裁剪的替代方法。他詳細(xì)介紹了如何使用該庫來自動(dòng)裁剪多行文本，并為讀者提供了示例代碼和演示。
下面是正文~~~
在Web 開發(fā)中，CSS中的文本裁剪一直是一個(gè)問題。直到幾年前，裁剪文本只能通過服務(wù)器端語言或JavaScript來完成，因?yàn)镃SS沒有文本裁剪功能。
單行裁剪
在2007年，第一個(gè)支持使用CSS 裁剪 文本的瀏覽器是Inte.NET Explorer 7（當(dāng)時(shí)IE是主流瀏覽器），它使用了 text-overflow: ellipsis; 屬性。該屬性使得文本的一行可以被修剪，這在修剪網(wǎng)頁文本方面是一個(gè)小的改進(jìn)。
h1{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
使用 Flexbox 模塊的第一個(gè)版本進(jìn)行多行裁剪
2012年，隨著Chrome中第一次實(shí)現(xiàn)CSS Flexbox，第一次支持多行文本修剪。它看起來很有前途，我們網(wǎng)頁開發(fā)人員認(rèn)為這是不再需要服務(wù)器端或JavaScript操作來修剪多行段落的開始。
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
但是這種喜悅很快就消失了。CSS Flexbox 模塊更新了兩次，之后就沒有留下任何多行特性的痕跡，這個(gè)特性是在 CSS Flexbox 的第一次實(shí)現(xiàn)中引入的。
對于許多開發(fā)者 - 包括我在內(nèi) - 他們正在使用這個(gè)功能，這個(gè)功能只被一個(gè)舊的非官方CSS模塊支持，這些更新感覺就像是多行修剪功能的死亡。
CSS flexbox版本的歷史：
display: box; /* old syntax from 2009 */
display: flexbox; /* unofficial syntax from 2011 */
display: flex; /* official 2013 syntax*/
Line-Clamp 重獲新生
在2015年7月，Edge瀏覽器決定支持 line-clamp 功能，使用 -webkit 前綴，這是舊的CSS Flexbox模塊中的語法。非常不尋常的是，微軟瀏覽器使用了 -webkit 前綴，這通常只用于Webkit瀏覽器， 如Chrome / Safari和Opera。
2019年7月，它再次發(fā)生了！這次是Firefox瀏覽器決定支持此功能。同樣，以同樣不尋常的方式。
IE，F(xiàn)irefox使用了舊的Flexbox模塊和 -webkit 前綴。
這兩個(gè)主要的瀏覽器，使用兩個(gè)不同的瀏覽器引擎——Mozilla的Moz和Microsoft的Edge，決定使用一個(gè)Webkit瀏覽器的舊功能。
絕望的時(shí)刻需要不擇手段，由于使用 –webkit 前綴是支持此功能的官方方式最接近的方式，因此他們做出了這個(gè)激動(dòng)人心的決定。
非官方的行數(shù)限制現(xiàn)在成為官方的了
主流瀏覽器如Firefox和Edge開始支持非官方的 line-clamp 功能，這意味著這個(gè)功能已經(jīng)成為常態(tài)。
使用 line-clamp 非常簡單：
- 在文本容器上定義舊的 CSS Flexbox 屬性 display: -webkit-box。
- 使用以下方法定義要顯示的文本行數(shù) -webkit-line-clamp: 3。
- 將舊的 flex-direction 屬性從舊的 flexbox 添加 -webkit-box-orient: vertical。
- 使用 overflow: hidden; 屬性定義元素。
.content p{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
使用 Sass Mixin 結(jié)合舊方法和新方法
現(xiàn)在我們有兩種通過CSS修剪文本的方法：省略號(hào)方法僅適用于單行文本，而line-clamp屬性適用于多行文本修剪。
如果可能的話，我更喜歡使用省略號(hào)這種舊的方式，因?yàn)樗咏?CSS 中的官方方式。
鑒于此，我創(chuàng)建了一個(gè) @mixin ，它通過接受一個(gè)整數(shù)的可選參數(shù)來同時(shí)針對單行修剪和多行修剪。
如果mixin傳遞了一個(gè)數(shù)字，它將使用多行clamp方法。如果它沒有收到任何參數(shù)，它將使用帶省略號(hào)的單行trim方法。這是一個(gè)重載函數(shù):
@mixin trim($numLines: null){
@if $numLines != null {
display:-webkit-box;
-webkit-line-clamp:$numLines;
-webkit-box-orient:vertical;
overflow:hidden;
}
@else{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
display:block;
}
}
我們可以以兩種不同的方式使用這個(gè)mixin：
.foo{
@include trim; /*will use the ellipsis = else result*/
}
.bar{
@include trim(3); /*will use the line-clamp = if result*/
}
事例地址：https://codepen.io/elad2412/pen/Poovzzb
.foo 和 .bar 類的示例結(jié)果：
行數(shù)限制的瀏覽器支持
瀏覽器支持非常廣泛，幾乎覆蓋了全球95%的瀏覽器。如果在瀏覽器中 line-clamp 不起作用，它只是不會(huì)修剪文本。這種回退對于不支持的瀏覽器已經(jīng)足夠好了。
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號(hào)。
