如何防止text-align: justify导致数字及关联内容间出现可拉伸空白

我太懂你这个糟心的问题了——明明用了 把数字和单位（比如123 456 €或者456 kg）绑在一起，结果开了text-align: justify之后，浏览器还是会把这些空格拉得老大，让数字和单位彻底分家，完全不像一个该绑定在一起的整体，可读性直接打折扣！

给你几个实用的解决办法，亲测有效：

• 用<span>包裹需要绑定的内容，加上white-space: nowrap样式
  这是最直接也最标准的方案，相当于直接告诉浏览器：“这块内容是一个整体，不准拆分，不准拉伸里面的空格！” 不用纠结各种特殊空格字符，代码写起来也清晰：

  <div style="text-align:justify; width: 260px;border:1px solid red;">
    Lorem ipsum dolor sit <span style="white-space: nowrap;">123 456 €</span> consectetur adipiscing elit. Etiam auctor
  </div>
  <div style="text-align:justify; width: 260px;border:1px solid red;">
    Lorem ipsum dolor sit <span style="white-space: nowrap;">456 kg</span> consectetur adipiscing elit. Etiam auctor
  </div>
  

  这里哪怕你不用 ，直接用普通空格也没关系，因为white-space: nowrap会强制把整个<span>里的内容当成一个不可拆分的单元，空格不会被拉伸，也不会换行。

• 特殊空格字符的替代思路（但不如nowrap靠谱）
  你提到的U+202F窄不换行空格确实是半宽的，没法和普通空格保持一致的宽度，体验感不太好。如果非要用字符方案，也可以试试U+00A0（就是普通 ）配合word-spacing: 0，但这种方法容易影响其他正常内容的排版，远不如<span>+nowrap的方案灵活稳妥。

针对你后来补充的单独454 kg也会被拆分的情况，用<span>包裹的方法也能完美解决——浏览器会把整个包裹的内容识别成一个“单词”，不会再把单位和数字拆开，完全符合你想要的“绑定成一个整体”的预期。

内容来源于stack exchange