排版
用于限制文本显示为特定行数的工具类。
| Class | Styles |
|---|---|
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>2020年3月10日</time> <h2>提升您的转化率</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>Use the line-clamp-[<value>] syntax to set the 行数 based on a completely custom value:
<p class="line-clamp-[calc(var(--characters)/100)] ..."> <!-- ... --></p>For CSS variables, you can also use the line-clamp-(<custom-property>) syntax:
<p class="line-clamp-(--my-line-count) ..."> <!-- ... --></p>This is just a shorthand for line-clamp-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix a line-clamp utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="line-clamp-3 md:line-clamp-4 ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.