使用text-overflow: ellipsis时如何隐藏省略号前的句尾多余句点

仅用CSS完全可以实现该需求，目前有两种适用不同场景的方案：

方案1：自定义text-overflow省略符（适合现代浏览器） #

Chrome 105+、Firefox 9+、Edge 105+等主流现代浏览器支持text-overflow传入自定义字符串，直接把省略符设置为2个点，和原有末尾的句点拼接正好是3个连续点，就不会出现多余的间隔句点：

.text-box {
  width: 120px; /* 按需调整宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ".."; /* 自定义省略符为两个点，和末尾原有句点组合为三个点 */
}

方案2：伪元素遮盖（兼容旧版本浏览器） #

如果需要兼容不支持自定义省略符的旧浏览器，可以用绝对定位的伪元素遮盖多余的句点，适配性更强：

.text-box {
  position: relative;
  width: 120px; /* 按需调整宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #fff; /* 要和父容器背景色一致 */
}
.text-box::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 6px; /* 按需调整为刚好遮盖1个句点的宽度，和字体大小匹配即可 */
  height: 100%;
  background-color: inherit;
}

该方案仅要求文本容器为纯色背景，没有其他使用限制。

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