CSS如何用line-clamp功能限制内容行数

2023-12-22 09:30:48

CSS中的line-clamp

line-clamp是CSS中一个用于截断文本内容的行数的属性，它可以帮助您在有限的空间内显示大量文本，而不会出现文本溢出或换行的情况。line-clamp属性支持在现代浏览器中使用，包括Chrome、Firefox、Safari和Edge。

语法

line-clamp的语法很简单，它接受一个整数作为参数，表示要截断文本的行数。例如：

p {
  line-clamp: 3;
}

上面的代码会将段落（<p>）元素中的文本截断为3行。如果文本内容超过3行，则会显示省略号（...）来表示被截断的部分。

兼容性

line-clamp属性在现代浏览器中都有良好的兼容性，但在IE浏览器中不支持。如果您需要在IE浏览器中实现文本截断，可以使用其他方法，例如使用overflow: hidden属性和text-overflow: ellipsis属性。

使用示例

line-clamp属性可以用于各种场景，例如：

在侧边栏或导航栏中显示长文本内容，而不会占用太多空间。
在新闻或博客文章列表中显示文章摘要，而不会显示全部内容。
在社交媒体平台上显示评论或消息，而不会显示全部内容。

下面是一个使用line-clamp属性的示例：

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nisl velit. Praesent vel orci ut enim bibendum aliquet. Nullam id ullamcorper tellus. Sed ut orci nec tortor tincidunt aliquam. Maecenas finibus malesuada feugiat. Nulla bibendum ullamcorper urna, sit amet pulvinar arcu lacinia et. Praesent hendrerit hendrerit diam, vitae pulvinar velit hendrerit ut. Suspendisse posuere nec tortor sit amet vehicula. Proin consectetur posuere nisi, in feugiat neque tempor at. Fusce congue, eros eget pulvinar sodales, augue elit pharetra augue, a aliquam felis orci id sem. Integer hendrerit volutpat arcu quis rhoncus. Fusce in placerat sapien. Vivamus in mauris ultrices, tempor purus a, sodales sem. Duis eget lacus ac enim volutpat consectetur. Sed quis ultricies odio. Mauris et odio vel lacus tempor tempor. Nunc rutrum pharetra ultrices. Phasellus tincidunt libero at orci maximus, eu dapibus metus tincidunt. Morbi quis tristique mauris. Ut ut accumsan ante. Proin a tincidunt magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

<style>
.container {
  width: 300px;
}

p {
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>