防止在< span style =" display：inline-block"" [英] Preventing line break after <span style="display:inline-block">

问题描述

在HTML叙述流程的< span> 元素中，

为了扩大检测点击的区域（某些范围的内容只有一个字符） ，我在定义为

 的类中添加了填充（以负边距抵消）。expand-click-area{ b $ b display：inline-block; 
 padding：5px; 
保证金：-5px； 
头寸：相对； 
} 
  

就点击行为而言，这很好。问题是，在以下情况下，Chrome 19有时会在跨度和以下逗号之间换行：

 < ; span class = expand-click-area>这是跨度文本< / span> ;, 
  

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

此行为似乎未在IE10中出现。在 http://jsfiddle.net/58XdJ/1/ 中查看示例。

解决方案

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

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/.

解决方案

Try wrapping the entire non-breakable text into the <nobr> tag.

这篇关于防止在< span style =" display：inline-block""的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！