word-wrap - 防止内联 block 在空白处换行 : pre?

Question

看起来 Chrome 正在包装一个内联 block 元素，如果它位于一行的末尾，即使它周围有一个 white-space:pre 容器并带有 overflow: auto。是否有可行的解决方案可以在不更改内容的情况下防止这种情况发生？

<div style="width:400px;height:200px;overflow:auto;white-space:pre">
The span should be at the end of this text, however, it wraps to the next line.<span style="width:1px;display:inline-block;height:1em;background:red"></span>
</div>

必须至少使用换行符来保留空白。空格和制表符可能会被压缩。

Answer 1

这个错误是 4 years old并且仍然存在于最新的 Chrome 和 Safari 中，但我确实找到了一种不添加不需要的空格的解决方法，即添加一个空的 :after 伪元素:http://jsbin.com/oQuBAmIJ/1/edit