CSS/JS自动换行前空格去除及文本换行后与分隔符间距异常问题

嘿，我来帮你搞定这个布局小麻烦！你遇到的问题核心是HTML元素间的空白字符被浏览器渲染成空格，再加上文本换行时的默认行为，才导致了间距异常。下面给你几个实用的解决方案，按推荐程度排序：

方法1：用Flexbox布局（最推荐） #

Flexbox是现代布局的首选，它会自动忽略子元素之间的空白字符，还能轻松实现垂直对齐，完美解决你的两个问题。

CSS代码： #

.wrapper {
  display: flex;
  align-items: center; /* 让所有元素垂直居中，视觉更协调 */
  max-width: 300px; /* 模拟你的容器最大宽度限制，按需调整 */
}

.divider {
  margin: 0 8px; /* 自定义分隔符与两边文本的间距，可根据需求修改 */
}

为什么有效： #

• Flex布局下，子元素（三个div）之间的换行、空格等空白会被自动忽略，不会变成额外的间距。
• 不管左侧文本怎么换行，分隔符都会紧紧跟在文本块旁边，不会出现莫名增大的间距。
• align-items:center确保文本和分隔符始终垂直对齐，避免换行后出现错位。

方法2：消除HTML元素间的空白（兼容旧浏览器） #

如果你因为某些原因不能用Flex，可以直接清理HTML里的空白，或者用CSS技巧消除空白：

方案A：压缩HTML结构 #

把三个div的标签连在一起，去掉它们之间的换行和空格：

<div class="wrapper">
  <div>this is my extra long text</div><div class="divider">|</div><div>text2</div>
</div>

然后给div设置display: inline-block让它们在同一行：

.wrapper > div {
  display: inline-block;
  vertical-align: middle; /* 垂直对齐 */
}
.divider {
  margin: 0 8px;
}
.wrapper {
  max-width: 300px;
}

方案B：用CSS的font-size:0技巧 #

给父容器设置font-size:0消除空白，再给子元素恢复正常字体大小：

.wrapper {
  font-size: 0; /* 消除子元素间的空白字符 */
  max-width: 300px;
}
.wrapper > div {
  font-size: 16px; /* 恢复你需要的字体大小 */
  display: inline-block;
  vertical-align: middle;
}
.divider {
  margin: 0 8px;
}

解决换行前去除空格的需求 #

如果是文本内容本身的空格导致换行时行尾残留空格，可以用CSS的text-wrap: pretty优化换行行为：

.wrapper > div:first-child {
  text-wrap: pretty; /* 让浏览器智能换行，避免行尾留下多余空格 */
}

这个属性会让文本在更合适的位置换行，自动处理行尾的空格，提升排版整洁度。如果你的浏览器版本较旧，也可以用white-space: pre-line，它会合并连续空格，同时保留自动换行。

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