Preventing line break after <span style=“display:inline-block”>

Question

In <span> elements in HTML narrative flow, in order to expand the area on which clicks are detected (some of the spans have content of only one character), I am adding padding (offsetting it with a negative margin) in a class defined as

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

This works fine in terms of the clicking behavior. The problem is that Chrome 19 will sometimes line break between the span and the following comma in a case such as the following:

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

Any thoughts on how to prevent this? Essentially, I would like breaking behavior equivalent to that when the <span> is not there at all, or does not have display:inline-block .

This behavior does not seem to appear in IE10. See an example at http://jsfiddle.net/58XdJ/1/ .

Answer 1

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

Answer 2

In case anybody faces this problem and none of the above solved solutions the problem like in my case, i found that adding this to the span will solve it.

display: contents;

Hope this helps someone ;)