css文字最多显示两行

作者：末世修罗发布日期:2026-07-13 浏览:63

/* 使用 CSS 实现文字最多显示两行 */
.text-container {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制文本显示的行数为2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

<!-- HTML 示例 -->
<div class="text-container">
  这是一段示例文本，用于展示如何使用CSS限制文本显示的行数。当文本超出两行时，会自动截断并显示省略号。
</div>

解释说明：

display: -webkit-box;：将容器设置为弹性盒子模型。
-webkit-line-clamp: 2;：限制文本显示的行数为2行。
-webkit-box-orient: vertical;：设置弹性盒子的方向为垂直。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本被截断时，用省略号表示。

上一篇：css rotate3d

下一篇：css 样式穿透