如何为多行截断文本的省略号末尾添加额外空格？

针对LTR文本高度超出容器时截断，需在省略号后预留空格的需求，以下是纯CSS实现方案（已知文本会被截断时，可给元素添加指定类）：

实现思路 #

隐藏浏览器默认省略号，通过伪元素自定义带空格的省略号，结合绝对定位和背景色覆盖截断处的多余文本，确保视觉效果符合需求。

代码示例 #

CSS #

p {
  font: 20px Arial;
  width: 400px;
  border: 1px dashed silver;
}

/* 基础截断样式，隐藏默认省略号 */
p.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: clip;
  position: relative;
  /* 预留伪元素空间，避免覆盖正常文本 */
  padding-right: 1.2em;
}

/* 自定义带空格的省略号 */
p.truncated::after {
  content: "... ";
  position: absolute;
  right: 0;
  bottom: 0;
  /* 背景色需与容器背景一致，覆盖截断的多余文本 */
  background-color: #fff;
}

HTML #

<!-- 文本截断时添加truncated类 -->
<p class="truncated">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p>

方案说明 #

1. 给需要截断的元素添加truncated类，启用自定义截断逻辑
2. 通过text-overflow: clip隐藏浏览器原生省略号，用伪元素生成带空格的省略号...
3. 伪元素绝对定位到容器右下角，背景色覆盖截断的多余文本，保证省略号显示清晰
4. 容器添加padding-right预留空间，避免伪元素覆盖正常文本内容

替代方案（保留原生省略号） #

若想保留浏览器原生省略号，仅在其后添加空格，可尝试以下方案（效果略逊于自定义省略号，依赖浏览器对shape-outside的支持）：

p.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

p.truncated::after {
  content: " ";
  display: inline-block;
  width: 0.5em; /* 空格宽度可根据字体调整 */
  height: 1em;
  float: right;
  shape-outside: inset(0 0 0 100%);
}

内容的提问来源于stack exchange，提问作者vsync