篇文章深入討論了在CSS中裁剪多行文本的方法，以提高網(wǎng)頁(yè)的外觀和用戶體驗(yàn)。作者首先介紹了常見(jiàn)的CSS文本裁剪技術(shù)，例如使用text-overflow和overflow屬性。然后，他引入了新的CSS屬性line-clamp，它可以更輕松地裁剪多行文本并添加省略號(hào)。作者解釋了如何使用line-clamp屬性設(shè)置最大行數(shù)，并指出了一些需要注意的注意事項(xiàng)。

接下來(lái)，作者提供了一些使用line-clamp屬性時(shí)可能遇到的限制和兼容性問(wèn)題，并分享了一種使用JavaScript 庫(kù)進(jìn)行文本裁剪的替代方法。他詳細(xì)介紹了如何使用該庫(kù)來(lái)自動(dòng)裁剪多行文本，并為讀者提供了示例代碼和演示。

下面是正文~~~

在Web 開(kāi)發(fā)中，CSS中的文本裁剪一直是一個(gè)問(wèn)題。直到幾年前，裁剪文本只能通過(guò)服務(wù)器端語(yǔ)言或JavaScript來(lái)完成，因?yàn)镃SS沒(méi)有文本裁剪功能。

單行裁剪

在2007年，第一個(gè)支持使用CSS 裁剪 文本的瀏覽器是Internet Explorer 7（當(dāng)時(shí)IE是主流瀏覽器），它使用了 text-overflow: ellipsis; 屬性。該屬性使得文本的一行可以被修剪，這在修剪網(wǎng)頁(yè)文本方面是一個(gè)小的改進(jìn)。

h1{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

使用 Flexbox 模塊的第一個(gè)版本進(jìn)行多行裁剪

2012年，隨著Chrome中第一次實(shí)現(xiàn)CSS Flexbox，第一次支持多行文本修剪。它看起來(lái)很有前途，我們網(wǎng)頁(yè)開(kāi)發(fā)人員認(rèn)為這是不再需要服務(wù)器端或JavaScript操作來(lái)修剪多行段落的開(kāi)始。

.line-clamp {   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

但是這種喜悅很快就消失了。CSS Flexbox 模塊更新了兩次，之后就沒(méi)有留下任何多行特性的痕跡，這個(gè)特性是在 CSS Flexbox 的第一次實(shí)現(xiàn)中引入的。

對(duì)于許多開(kāi)發(fā)者 - 包括我在內(nèi) - 他們正在使用這個(gè)功能，這個(gè)功能只被一個(gè)舊的非官方CSS模塊支持，這些更新感覺(jué)就像是多行修剪功能的死亡。

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模塊中的語(yǔ)法。非常不尋常的是，微軟瀏覽器使用了 -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開(kāi)始支持非官方的 line-clamp 功能，這意味著這個(gè)功能已經(jīng)成為常態(tài)。

使用 line-clamp 非常簡(jiǎn)單：

1. 在文本容器上定義舊的 CSS Flexbox 屬性 display: -webkit-box;
2. 使用以下方法定義要顯示的文本行數(shù) -webkit-line-clamp: 3;
3. 將舊的 flex-direction 屬性從舊的 flexbox 添加 -webkit-box-orient: vertical;
4. 使用 overflow: hidden; 屬性定義元素

.content p{   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

使用 Sass Mixin 結(jié)合舊方法和新方法

現(xiàn)在我們有兩種通過(guò)CSS修剪文本的方法：省略號(hào)方法僅適用于單行文本，而line-clamp屬性適用于多行文本修剪。

如果可能的話，我更喜歡使用省略號(hào)這種舊的方式，因?yàn)樗咏?CSS 中的官方方式。

鑒于此，我創(chuàng)建了一個(gè) @mixin ，它通過(guò)接受一個(gè)整數(shù)的可選參數(shù)來(lái)同時(shí)針對(duì)單行修剪和多行修剪。

如果mixin傳遞了一個(gè)數(shù)字，它將使用多行clamp方法。如果它沒(méi)有收到任何參數(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 類(lèi)的示例結(jié)果：

行數(shù)限制的瀏覽器支持

瀏覽器支持非常廣泛，幾乎覆蓋了全球95%的瀏覽器。如果在瀏覽器中 line-clamp 不起作用，它只是不會(huì)修剪文本。這種回退對(duì)于不支持的瀏覽器已經(jīng)足夠好了。

網(wǎng)頁(yè)設(shè)計(jì)中，標(biāo)題、段落和文本格式是構(gòu)成頁(yè)面內(nèi)容的基石。它們不僅有助于傳達(dá)信息，還能通過(guò)組織和強(qiáng)調(diào)內(nèi)容來(lái)提升用戶體驗(yàn)。本文將詳細(xì)介紹這些元素的使用方法，并提供實(shí)際例子。

標(biāo)題（Headings）

標(biāo)題是用來(lái)定義網(wǎng)頁(yè)中不同部分的標(biāo)題。在HTML中，標(biāo)題標(biāo)簽從<h1>到<h6>，其中<h1>表示最高的層級(jí)，通常用于主標(biāo)題，而<h6>表示最低的層級(jí)。為了保證良好的SEO實(shí)踐和無(wú)障礙訪問(wèn)，應(yīng)保證標(biāo)題層級(jí)的邏輯順序。

使用實(shí)例：

<h1>歡迎來(lái)到我的博客</h1>
<h2>最新文章</h2>
<h3>Web開(kāi)發(fā)的未來(lái)趨勢(shì)</h3>
<h4>前言</h4>
<h4>主要內(nèi)容</h4>
<h4>結(jié)論</h4>
<h3>如何提高JavaScript技能</h3>

在這個(gè)例子中，<h1>用于最主要的標(biāo)題，<h2>用于區(qū)分頁(yè)面中的主要部分，<h3>用于文章標(biāo)題，<h4>用于文章內(nèi)部的小節(jié)。

段落（Paragraphs）

段落是文本的基本單元，用于組織和展示連續(xù)的文本內(nèi)容。在HTML中，<p>標(biāo)簽用于定義段落。合理的段落分割有助于讀者更好地理解和吸收信息。

使用實(shí)例：

<p>在今天的數(shù)字時(shí)代，網(wǎng)頁(yè)開(kāi)發(fā)已經(jīng)成為了一個(gè)不斷演變的領(lǐng)域。隨著新技術(shù)的出現(xiàn)，開(kāi)發(fā)者需要不斷學(xué)習(xí)和適應(yīng)。</p>

<p>JavaScript是構(gòu)建現(xiàn)代網(wǎng)頁(yè)不可或缺的一部分。為了成為一名更優(yōu)秀的前端開(kāi)發(fā)者，提高JavaScript技能是非常重要的。</p>

在這個(gè)例子中，兩個(gè)<p>標(biāo)簽分別定義了兩個(gè)獨(dú)立的段落，每個(gè)段落都是一個(gè)完整的思想單元。

文本格式

文本格式用于強(qiáng)調(diào)或區(qū)分網(wǎng)頁(yè)中的文本內(nèi)容。HTML提供了多種標(biāo)簽來(lái)改變文本的樣式和意義，包括但不限于加粗、斜體、下劃線、上標(biāo)和下標(biāo)等。

加粗（Bold）

<strong>和<b>標(biāo)簽用于加粗文本，但<strong>通常表示重要性，而<b>僅用于視覺(jué)上的加粗。

使用實(shí)例：

<p>重要提示：<strong>請(qǐng)不要在任何情況下泄露您的密碼。</strong></p>
<p>這是一個(gè)<b>加粗</b>的文本示例。</p>

斜體（Italic）

<em>和<i>標(biāo)簽用于斜體文本，<em>表示強(qiáng)調(diào)，而<i>僅用于斜體樣式。

使用實(shí)例：

<p>當(dāng)我們談?wù)?lt;em>用戶體驗(yàn)</em>時(shí)，我們指的是用戶與產(chǎn)品交互的整體感受。</p>
<p>這是一個(gè)<i>斜體</i>的文本示例。</p>

下劃線和刪除線

``標(biāo)簽用于下劃線文本，而<del>標(biāo)簽用于顯示文本已被刪除或更改。

使用實(shí)例：

<p>請(qǐng)閱讀使用條款了解更多信息。</p>
<p>原價(jià)<del>99.99美元</del> 現(xiàn)價(jià)69.99美元。</p>

上標(biāo)和下標(biāo)

<sup>和<sub>標(biāo)簽用于創(chuàng)建上標(biāo)和下標(biāo)文本，常用于科學(xué)公式和腳注。

使用實(shí)例：

<p>水的化學(xué)式是H<sub>2</sub>O。</p>
<p>愛(ài)因斯坦的質(zhì)能方程式E=mc<sup>2</sup>。</p>

結(jié)論

合理使用標(biāo)題、段落和文本格式可以極大地提升網(wǎng)頁(yè)內(nèi)容的可讀性和專(zhuān)業(yè)性。通過(guò)明確的層級(jí)結(jié)構(gòu)和強(qiáng)調(diào)重要內(nèi)容，你可以幫助用戶快速找到他們需要的信息。記住正確使用這些基本元素，你的網(wǎng)頁(yè)將更加吸引人且功能強(qiáng)大。