如何用CSS实现文本溢出时末尾仅显示单个点的截断效果？

确实很多开发者遇到过这个需求——在固定宽度容器中，文本溢出时截断并仅保留单个末尾点，而非默认的三点省略号。你尝试的两种方案遇到的字符宽度适配问题是这类需求的常见痛点，下面提供几种更可靠的实现方式：

纯CSS近似实现（单行场景） #

这种方案通过隐藏默认省略号，用伪元素添加单个点，同时利用背景色覆盖溢出的文本末尾，尽可能减少字符宽度差异带来的问题：

.fixed-width-box {
  width: 200px; /* 自定义固定宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* 禁用默认省略号 */
  position: relative;
  display: inline-block;
  background: #ffffff; /* 与容器背景色一致 */
  padding-right: 8px; /* 给末尾点预留空间 */
}

.fixed-width-box::after {
  content: ".";
  position: absolute;
  right: 0;
  top: 0;
  /* 用背景色覆盖可能溢出的最后一个字符 */
  background: inherit;
  padding-left: 2px;
}

注意：这个方案的局限性是即使文本未溢出，末尾也会显示点。如果需要仅在溢出时显示点，就得结合JavaScript判断文本是否超出容器宽度，再动态添加/移除点的样式。

结合JavaScript的完美实现 #

通过JS判断文本是否溢出容器，再控制伪元素的显示状态，解决纯CSS无法判断溢出的问题：

.fixed-width-box {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  position: relative;
  display: inline-block;
  padding-right: 8px;
}

.fixed-width-box.has-overflow::after {
  content: ".";
  position: absolute;
  right: 0;
  top: 0;
  background: inherit;
  padding-left: 2px;
}

document.querySelectorAll('.fixed-width-box').forEach(el => {
  if (el.scrollWidth > el.offsetWidth) {
    el.classList.add('has-overflow');
  }
});

这种方式可以精准控制只有当文本溢出时才显示单个点，同时避免字符宽度差异导致的布局问题。

为什么你的方案会出问题？ #

• 方案一依赖父容器截断省略号，由于不同字符（尤其是中英文）宽度差异大，容器宽度很难精准控制，导致截断点数不稳定；
• 方案二直接用伪元素添加点，没有处理文本未溢出的情况，且未考虑字符宽度差异带来的间距问题，无法保证点的位置始终贴合最后一个可见字符。

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