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.
排版
line-clamp
用于将文本限制为特定行数的工具。
类 | 样式 |
---|---|
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>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 line-clamp-<number>
工具(如 line-clamp-2
和 line-clamp-3
)在特定行数后截断多行文本:
¥Use line-clamp-<number>
utilities like line-clamp-2
and line-clamp-3
to truncate multi-line text after a specific number of lines:
Boost your conversion rate
<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>
撤消线夹(Undoing line clamping)
¥Undoing line clamping
使用 line-clamp-none
撤消先前应用的线夹工具:
¥Use line-clamp-none
to undo a previously applied line clamp utility:
<p class="line-clamp-3 lg:line-clamp-none"> <!-- ... --></p>
使用自定义值(Using a custom value)
¥Using a custom value
使用 line-clamp-[<value>]
语法 根据完全自定义的值设置 number of lines:
<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()
函数。
响应式设计(Responsive design)
¥Responsive design
在 line-clamp
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="line-clamp-3 md:line-clamp-4 ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。