It seems Chrome is wrapping an inline-block element if it is at the end of a line even if there is a white-space:pre container around it with overflow: auto. Is there a workable solution to prevent this from happening without changing the content?
如果Chrome位于一行的末尾,即使存在一个white-space:pre容器,并且溢出: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>
The white-space must be preserved using newlines at least. Spaces and tabs may be compressed.
必须至少使用换行符保留空白区域。可以压缩空格和制表符。
2 个解决方案
#1
7
This bug is 4 years old and still present in the latest Chrome and Safari, but I did find a workaround that doesn't add undesirable whitespace, which is to add an empty :after pseudo-element: http://jsbin.com/oQuBAmIJ/1/edit
此错误已有4年历史,仍然存在于最新的Chrome和Safari中,但我确实找到了一种不会添加不需要的空格的解决方法,即添加一个空的:after伪元素:http://jsbin.com/ oQuBAmIJ / 1 /编辑
#2
3
Try changing your white-space setting to white-space: nowrap instead.
尝试将空白区域设置更改为空白区域:nowrap。
#1
7
This bug is 4 years old and still present in the latest Chrome and Safari, but I did find a workaround that doesn't add undesirable whitespace, which is to add an empty :after pseudo-element: http://jsbin.com/oQuBAmIJ/1/edit
此错误已有4年历史,仍然存在于最新的Chrome和Safari中,但我确实找到了一种不会添加不需要的空格的解决方法,即添加一个空的:after伪元素:http://jsbin.com/ oQuBAmIJ / 1 /编辑
#2
3
Try changing your white-space setting to white-space: nowrap instead.
尝试将空白区域设置更改为空白区域:nowrap。