后防止换行

Question

在 HTML 叙述流中的<span>元素中，为了扩大检测到点击的区域（一些跨度只有一个字符的内容），我在定义的类中添加了填充（用负边距抵消）作为

.expand-click-area {
    display:inline-block;
    padding:5px;
    margin:-5px;
    position:relative;
}

这在点击行为方面工作正常。 问题是 Chrome 19 有时会在以下情况下在跨度和以下逗号之间换行：

<span class="expand-click-area">this is span text</span>,

关于如何防止这种情况的任何想法？ 本质上，我希望破坏行为相当于<span>根本不存在或没有display:inline-block 。

此行为似乎不会出现在 IE10 中。 请参阅http://jsfiddle.net/58XdJ/1/ 中的示例。

Answer 1

尝试将整个不可破坏的文本包装到<nobr>标签中。

Answer 2

如果有人面临这个问题并且上述解决方案都没有解决像我这样的问题，我发现将它添加到跨度将解决它。

display: contents;

希望这有助于某人;)