和预换行：标记和文本之间的下划线空格折叠 - Chrome/Safari答案

【问题标题】： and pre-wrap: underlined spaces are collapsed between tag and text - Chrome/Safari 和预换行：标记和文本之间的下划线空格折叠 - Chrome/Safari
【发布时间】：2015-11-04 14:13:22
【问题描述】：

我有一个项目，我需要在一个句子中保留和显示所有带下划线的空格。我仍然需要折叠所有其他空间。

我的 css 中有 u {white-space:pre-wrap}，但 Chrome 和 Safari 正在折叠标签和文本之间的所有空白。它们确实保留了所有其他带下划线的空格。

<u>     this     is     my     text     </u>

应该是：

_____this____is_____my_____text_____

但 Chrome 将其显示为：

this____is_____my_____text_____

http://codepen.io/ejg/pen/PPBBvG

u {white-space:pre} 确实可以正常工作，但是我失去了下划线部分的换行。

还有其他方法可以保留 中的空白吗？或者有什么方法可以让 Chrome/Safari 正常运行？

【问题讨论】：

如果您看到此表developer.mozilla.org/es/docs/Web/CSS/white-space#Values，您会看到 pre-wrap 包装了空格。是chrome的bug吗？也许。但最好使用pre 而不是pre-wrap，因为在这种模式下您不会遇到问题。铬很烂:)
这个属性的问题是，讨论可能会导致未来的草稿发生变化，属性的名称也可能会改变，几个值此时不起作用。一些建议的值不起作用，包括 trim-inner、consume-before 和 consume-after，因为该属性是继承的，这意味着或
可能会导致更多的空白被删除。查看更多：techrepublic.com/blog/web-designer/…
如果你想要一个解决方法......至少在 Chrome 中，使用 span 和 text-decoration 似乎可以正常工作。 codepen.io/anon/pen/yYxNed（这里无法测试 Safari，不是最新版本）