line-clamp
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
line-clamp
CSS 属性可以把块容器中的内容限制为指定的行数。
备注:
为了兼容旧版本,供应商前缀的 -webkit-line-clamp
属性仅在与 display
属性设置为 -webkit-box
或 -webkit-inline-box
且 -webkit-box-orient
属性设置为 vertical
时生效。尽管这些带前缀的属性已被废弃,但这三个属性的相互依赖关系是一种完全规范化的行为,并将继续得到支持。
它只有在 display
属性设置成 -webkit-box
或者 -webkit-inline-box
并且 box-orient
属性设置成 vertical
时才有效果。
在大部分情况下,也需要设置 overflow
属性为 hidden
,否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号。
当应用于锚(anchor)元素时,截断可以发生在文本中间,而不必在末尾。
语法
形式定义
形式语法
line-clamp =
none |
<integer [1,∞]> || <'block-ellipsis'>
<block-ellipsis> =
none |
auto |
<string>
示例
截断段落
HTML
html
<p>
在此示例中,<code>-webkit-line-clamp</code> 属性设置为
<code>2</code>,即文本在超过两行后将被截断。文本截断处将显示省略号。
</p>
CSS
css
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
结果
规范
Specification |
---|
CSS Overflow Module Level 4 # propdef-line-clamp |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
line-clamp | ||||||||||||
none |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.