防止内联块包裹在空白区域上: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年历史,并且仍然存在于最新的Chrome和Safari中,但我确实找到了一种不会添加不需要的空格的解决方法,即添加一个空的:after伪元素:http://jsbin.com/oQuBAmIJ/ 1 /编辑

Answer 2

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