在 之后防止换行答案

【问题标题】：Preventing line break after 在 之后防止换行
【发布时间】：2012-05-06 18:40:57
【问题描述】：

在 HTML 叙述流中的 元素中，为了扩大检测到点击的区域（一些跨度只有一个字符的内容），我在一个类定义为

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

这在点击行为方面效果很好。问题是 Chrome 19 有时会在以下情况下在 span 和以下逗号之间换行：

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

关于如何防止这种情况的任何想法？从本质上讲，我希望破坏行为等同于  根本不存在或没有 display:inline-block 时的行为。

这种行为似乎没有出现在 IE10 中。请参阅http://jsfiddle.net/58XdJ/1/ 的示例。

【问题讨论】：

Prevent line-break of span element的可能重复
出于某种原因，当我将跨区文本放入 时，它不再断行。它在<div> 中，我知道<div>s 和s 都是块级的，所以没有任何意义。也许是因为我的 div 是一个弹性盒子？

标签： html css

【解决方案1】：

尝试将整个不可破坏的文本包装到  标记中。

【讨论】：

这行得通，与 CSS 等效的  一样。
我使用   与 Foundation 5 一起使用。有时我需要在较小的设备上缩短描述或标题，所以我会这样做：Dominant Color，但显然这会中断。所以我改用：Dominant Color。这是我使用它的一个非常好的理由，这也意味着我不必编写任何 CSS。
 标签已被弃用，现已过时：developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

【解决方案2】：

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

display: contents;

希望这对某人有所帮助；）

【讨论】：