使用 line-clamp 实现多行文本省略

line-clamp 是 CSS 属性，用于控制多行文本的显示量。它可以实现在固定高度的容器中，只显示指定行数的文本，并将超出部分省略号表示。

语法

.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; /* 显示的行数 */
}

说明

当容器内有多行文本时，line-clamp 可以指定容器只显示指定行数的文本：

• 设置 display: -webkit-box，用于启用弹性盒子模型
• 设置 -webkit-box-orient: vertical，指定子元素排列方式为垂直方向
• 设置 overflow: hidden，控制文本溢出时元素的显示方式
• 设置 -webkit-line-clamp，指定显示的行数为 3

示例

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae dolor orci. Donec vel nisi eu magna suscipit malesuada a ac eros. Quisque sit amet massa condimentum risus posuere malesuada eu at odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer nec malesuada quam. Donec lobortis nisl elit, ac rhoncus velit suscipit ut. Nullam placerat euismod nisi quis auctor. Fusce et diam eu sapien sagittis commodo eu consequat justo. Nam mauris velit, rutrum ut hendrerit ut, cursus et nunc. Fusce commodo viverra urna ac blandit. Praesent vitae justo enim. Nullam vestibulum sed odio nec interdum. Suspendisse porta mauris elit, id pharetra dui facilisis eget.
</div>

.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

效果如下：