CSS line-clamp 属性的缺点
CSS line-clamp 属性有一些缺点，我们将逐一查看：
- CSS line-clamp 属性具有有限的浏览器支持。 Firefox 和 Opera Mini 等浏览器不支持它。但是，我们可以为不支持此属性的浏览器创建回退。使用@supports (-webkit-line-clamp: 2) {} 检查，将显示它是否在当前浏览器中工作。如果它不起作用，此检查将为该浏览器提供后备。
- 另一个缺点是它不提供省略号的任何替代方案。这会导致另一个问题：我们可能会在不同的语言中得到不同的定义。
- CSS line-clamp 属性需要许多支持属性，例如：
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
| 初始值 | none |
|---|---|
| 应用于 | - |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.Lineclamp =“2”; |
CSS line-clamp 属性值说明
| 值 | 描述 |
|---|---|
| none | 没有最大线条数，没有截断。 |
| <integer> | 在截断内容之前设置最大行数，然后显示省略号。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
line-clamp 属性在指定的行数处截断文本。
它限制了文本，在我们告诉它所需的行数后，在演示的最后一个单词或者单词的一部分之后添加省略号。
它是以下的简写：
- max-lines
- block-overflow
语法
line-clamp: normal | <integer> | initial | inherit;
line-clamp 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
align-items: center;
background: radial-gradient( farthest-side at bottom left, #eee, #ccc),
radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
line-height: 1.5;
}
.element {
background-color: #fff;
box-shadow: 1px 1px 10px #666;
padding: 2em;
width: 200px;
}
.element p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS line-clamp 属性示例</h2>
<div class="element">
<p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
<p>
</div>
</body>
</html>
在给定的示例中，文本在第四行被剪切。
日期：2020-06-02 22:14:37 来源：oir作者：oir