开发打字应用：文本换行时如何保留行尾空格？

我开发的打字应用里，文本在固定宽度容器中换行时，必须保留行尾空格——用户要完全按显示内容输入，行尾空格得让用户一眼看到，不然不知道要输入空格（待输入字符会高亮）。

现在用的代码是这样的：

<div style="width: 26px">
  <div style="outline: 1px solid red; white-space: pre-wrap">
    a aaaa<span style="outline: 1px solid green"> </span>a a<span 
    style="outline: 1px solid green"> </span>a
  </div>
</div>

问题和解决思路 #

用white-space: pre-wrap虽然能保留空格并自动换行，但浏览器渲染时，行尾的空格经常没视觉占位，用户看不到。要解决这个，给包裹空格的<span>加个强制占位的样式就行：

<div style="width: 26px">
  <div style="outline: 1px solid red; white-space: pre-wrap; font-family: monospace">
    a aaaa<span style="outline: 1px solid green; display: inline-block; min-width: 1ch"> </span>a a<span 
    style="outline: 1px solid green; display: inline-block; min-width: 1ch"> </span>a
  </div>
</div>

• display: inline-block; min-width: 1ch：让空格所在的span至少占一个字符宽度，不管是不是在行尾，都能显示出明确的占位。
• 加上font-family: monospace：打字应用用等宽字体更合理，每个字符宽度一致，换行和空格的位置更准确，避免布局错乱。

注意别用 替代普通空格，否则用户输入普通空格时会和显示内容不匹配，影响输入校验。

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