css 三行省略号

作者：巅峰战犯发布日期:2025-03-17 浏览:124

/* CSS 三行省略号示例代码 */

.ellipsis-three-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

解释说明：

display: -webkit-box;：使用 WebKit 引擎的弹性盒子模型。
-webkit-line-clamp: 3;：限制文本显示为 3 行，超过的部分会用省略号表示。
-webkit-box-orient: vertical;：设置子元素垂直排列。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时，用省略号表示。

上一篇：css在线可视化调试

下一篇：css 子元素