两端对齐文本容器内保留固定宽度普通空格的最优实现方案

最佳实践是使用span标签包裹需要保留固定常规空格的短语组合，配合少量CSS样式即可实现需求，该方案兼容性覆盖所有主流浏览器，性能损耗可忽略。

具体实现 #

步骤1：定义通用CSS类 #

/* 固定内部空格不参与两端对齐拉伸 */
.fixed-inner-space {
  display: inline-block;
  vertical-align: baseline; /* 保证和普通文本对齐一致，无偏移 */
  text-align: initial;
}

步骤2：HTML中使用 #

将需要保留固定空格的内容连同中间的空格一起用上述类的span包裹即可，示例如下：

<div style="text-align: justified;">
  sauna farming apples towels 
  <span class="fixed-inner-space">car lifting</span>
  <span class="fixed-inner-space">carpet stealing</span>
  football owls
</div>

如果不想单独定义CSS类，也可以直接写行内样式：

<span style="display: inline-block; vertical-align: baseline; text-align: initial;">car lifting</span>

实现原理 #

inline-block元素的内部排版逻辑独立于父容器，父容器text-align: justified的空格拉伸规则只会作用于行内块元素之间的空白，不会调整行内块内部的空格大小，因此内部空格会保持当前字体下的常规默认宽度，同时整个行内块会和普通文本一样参与父级的两端对齐排版，不会破坏容器整体的两端对齐效果。

其他可选方案（局限性较高） #

如果你的使用场景仅面向现代浏览器，也可以给包裹的span添加text-wrap: nowrap样式，该方案可以保证内部空格不被拉伸，但是会导致整个短语组合不会被折行，只适合短短语场景。

避坑提示 #

•  本质是不换行空格，依然会参与两端对齐的空格拉伸，无法满足需求
• 不要使用固定宽度的Unicode空格字符（如窄空格、全角空格等），这类字符宽度和常规空格不一致，且部分浏览器依然会对其进行拉伸调整。

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