如何去除text-overflow生成的省略号后的多余空格？

这个坑我之前踩过！其实text-overflow: ellipsis本身不会生成多余空格，问题基本出在HTML结构的空白或者引号的添加方式上，给你几个实用的解决思路：

1. 用CSS伪元素添加引号（最推荐） #

手动在HTML里加引号很容易不小心引入空格，换成伪元素生成引号就能彻底避免这个问题，还能保证引号始终在内容两端，不会被截断：

<div class="truncated-text">这是一段超长的文本，测试测试测试测试测试测试测试测试测试</div>

.truncated-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 必须设置宽度才会触发截断 */
  position: relative;
  padding: 0 12px; /* 给左右引号留出空间 */
}

/* 用伪元素生成左右引号 */
.truncated-text::before {
  content: '"';
  position: absolute;
  left: 0;
}

.truncated-text::after {
  content: '"';
  position: absolute;
  right: 0;
}

这样不管文本有没有被截断，引号都会牢牢贴在内容边缘，完全不会出现多余空格。

2. 清理HTML结构中的多余空白 #

如果坚持手动加引号，一定要检查HTML里有没有多余的空格或换行：

❌ 错误写法（引号和文本元素之间有空格）：

<div class="truncate">
  " <span>超长文本内容超长文本内容</span> "
</div>

✅ 正确写法（引号和元素紧密结合）：

<div class="truncate">" <span>超长文本内容超长文本内容</span>"</div>

或者直接把引号和文本放在同一个元素里：

<div class="truncate">"超长文本内容超长文本内容"</div>

3. 消除容器内的行内元素空白 #

如果截断容器里有多个行内/行内块元素，浏览器会把元素之间的空白（换行、空格）渲染出来。可以给容器设置font-size: 0来消除空白，再给内部文本重置字号：

.truncate-container {
  font-size: 0; /* 消除内部元素间的空白 */
}

.truncate-text {
  font-size: 16px; /* 重置文本字号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 200px;
}

这样就能彻底解决因为元素间空白导致的省略号后多余空格问题啦！

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