使用-webkit-line-clamp属性时能否移除或自定义末尾省略号

原生-webkit-line-clamp属性没有提供官方配置项，既不能直接修改默认生成的...省略标记，也不能直接关闭省略号显示，要实现移除省略号、替换自定义内容的效果，只能通过额外的CSS或者JS方案绕开原生限制。

完全移除默认省略号 #

• 纯CSS遮罩方案：给文本容器设置相对定位，通过::after伪元素生成一个和容器背景色一致的纯色块，固定定位在文本最后一行的最右侧，宽度刚好覆盖默认省略号的尺寸（通常12-16px，随字号大小调整即可），把原生生成的三个点完全挡住。
  参考实现代码：

  .text-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 控制显示行数 */
    overflow: hidden;
    position: relative;
    line-height: 1.5;
    /* 最大高度 = 行高 * 显示行数，避免-webkit-line-clamp兼容性问题 */
    max-height: calc(1.5em * 2);
  }
  .text-clamp::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 1.5em;
    background: #ffffff; /* 必须和文本容器的背景色完全一致 */
  }
  

• JS截断方案：如果不想用遮挡的取巧方式，可以直接放弃-webkit-line-clamp的原生截断逻辑，通过JS逐字检测文本内容的可视高度，当高度超过设定的行数对应高度时，直接截断多余文本即可，这种方案完全不会生成默认省略号，适配所有场景，缺点是需要监听容器尺寸变化重新计算，性能略低于纯CSS方案。

替换默认省略号为自定义内容 #

替换自定义内容的逻辑和移除省略号的遮罩方案基本一致，只需要把伪元素的content值改成你需要的自定义内容（比如查看更多、>>>、全文等），同时调整伪元素的宽度适配自定义内容的长度，保证既能完全盖住原生的...，又能完整显示自定义内容即可。
参考实现代码：

.text-clamp-custom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  position: relative;
  line-height: 1.5;
  max-height: calc(1.5em * 3);
}
.text-clamp-custom::after {
  content: "查看全文"; /* 自定义省略位置的内容 */
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 2px;
  height: 1.5em;
  background: #ffffff; /* 和容器背景保持一致 */
  color: #1677ff;
}

注意：纯CSS遮罩方案仅适用于文本容器是纯色背景的场景，如果容器背景是渐变、背景图、透明等非纯色效果，遮罩块会出现明显的拼接痕迹，这种场景优先选择JS截断方案，手动在截断位置插入自定义内容，展示效果更自然。

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