文字排版
用於將文字限制在特定行數的工具類別。
| 類別 | 樣式 |
|---|---|
line-clamp-<number> | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <number>; |
line-clamp-none | overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset; |
line-clamp-(<custom-property>) | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(<custom-property>); |
line-clamp-[<value>] | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <value>; |
使用 line-clamp-<number> 工具類別，例如 line-clamp-2 和 line-clamp-3，在特定行數後截斷多行文字
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.
Lindsay Walton<article> <time>Mar 10, 2020</time> <h2>Boost your conversion rate</h2> <p class="line-clamp-3"> Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim. </p> <div> <img src="/img/lindsay.jpg" /> Lindsay Walton </div></article>使用 line-clamp-none 來取消先前套用的行數限制工具類別
<p class="line-clamp-3 lg:line-clamp-none"> <!-- ... --></p>使用 line-clamp-[<value>] 語法 來設定行數基於完全自訂的值
<p class="line-clamp-[calc(var(--characters)/100)] ..."> <!-- ... --></p>對於 CSS 變數，您也可以使用 line-clamp-(<custom-property>) 語法
<p class="line-clamp-(--my-line-count) ..."> <!-- ... --></p>這只是 line-clamp-[var(<custom-property>)] 的簡寫，會自動為您新增 var() 函式。
前綴一個 line-clamp 工具類別 與斷點變體（例如 md:）一起使用，僅在中 型螢幕尺寸及以上套用該工具類別
<div class="line-clamp-3 md:line-clamp-4 ..."> <!-- ... --></div>在變體文件中瞭解更多關於使用變體的信息。
