防止内联块包裹在空白区域上：pre？

Question

似乎Chrome正在包装一个内联块元素，如果它位于一行的末尾，即使有一个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

Answer 2

请尝试将空白区域设置更改为white-space: nowrap。