CSS如何设置多行文本省略号_CSS多行文本省略号换行技巧

overflow: hidden; text-overflow: ellipsis;

display: -webkit-box; -webkit-line-clamp: N; -webkit-box-orient: vertical;

<div class="container">
  这是一段很长的文本，我们需要让它在超出容器时显示省略号。这是一段很长的文本，我们需要让它在超出容器时显示省略号。这是一段很长的文本，我们需要让它在超出容器时显示省略号。
</div>

.container {
  width: 200px; /* 定义容器宽度 */
  height: 50px; /* 定义容器高度，决定显示多少行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 2; /* 显示的行数，这里显示两行 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
}

overflow: hidden

text-overflow: ellipsis

display: -webkit-box; -webkit-line-clamp: N; -webkit-box-orient: vertical;

N

width

max-width

overflow: hidden

text-overflow: ellipsis

-webkit-line-clamp

-webkit-box-orient

-webkit-line-clamp

::after

-webkit-line-clamp

position: relative;

::after

position: relative;

::after

.container {
  position: relative;
  width: 200px;
  height: 50px;
  overflow: hidden;
}

.container::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* 遮盖文本，确保省略号清晰可见 */
  padding-left: 5px; /* 调整省略号与文本的距离 */
}

::after

right

bottom

padding-left

background