css 多行省略

作者：′残花败落° 发布日期:2026-06-06 浏览:63

/* CSS 多行省略示例代码 */

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 设置显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 解释说明：
1. `display: -webkit-box;`：使用弹性盒模型布局。
2. `-webkit-line-clamp: 3;`：限制在一个块元素显示的文本的行数为3行，可以根据需要调整行数。
3. `-webkit-box-orient: vertical;`：设置或检索伸缩盒对象的子元素的排列方式为垂直方向。
4. `overflow: hidden;`：隐藏超出容器的内容。
5. `text-overflow: ellipsis;`：当文本溢出时显示省略号。
*/

上一篇：css >>>

下一篇：css 不显示滚动条