文本在错误的位置中断答案

【问题标题】：Text breaks on the wrong place文本在错误的位置中断
【发布时间】：2013-11-17 16:53:24
【问题描述】：

社区。p>

我尝试了很多东西，但我真的不明白为什么它不起作用。

我希望这些关键字不要换行：

https://www.dropbox.com/s/rgka8jkxzxcw1ez/screenshots.PNG

如果关键字较长，它应该浮动到下一行而不中断。

代码如下：

keyWordList.append('<span><span class="keyword" id="' + ui.item.id + '">' + ui.item.value + '</span>');
                    $('#' + ui.item.id).append('<span><p class="remove_btn" onclick="removeKeyword(this);">' +
                        '&#10006;</p></span></span>');

我尝试过 nowrap、white-space: pre、white-space: nowrap 和其他一些东西。但使用“nowrap”或“white-space: nowrap;”关键字跑出窗口。

我能做什么？

【问题讨论】：

尝试使用带有 display:inline 的 div，而不是 spans。
尝试让你的容器成为dispay:inline-block。也显示原始 HTML 比必须尝试解释 jQuery 以获取您实际询问的 HTML 更容易。 :)
span（没有任何类）和keyWordList 的 CSS 是什么？

标签： html css line-breaks

【解决方案1】：

将display: inline-block 用于子标签可以帮助您。

running demo

【讨论】：

【解决方案2】：

这应该可行：

<div id="tags">
    <span class="keyword">Tag1</span>
    <span class="keyword">Tag2</span>
    <span class="keyword">Tag3</span>
    <span class="keyword">word1 word2 word3</span>
    <span class="keyword">A very long wordxxxxxxxxxxxxxx</span>
</div>

CSS：

#tags {
    width: 100px;
    border: 1px solid red;
}

.keyword {
    background: yellow;
    white-space: nowrap;
}

jsfiddle

【讨论】：

【解决方案3】：

此答案基于 Aaron Digulla 的答案，但进行了一些修改以使其更合适（我觉得）。关键修改是将white-space: nowrap替换为display: inline-block。后者将关键字 span 更改为块和内联的混合，这意味着它将采用严格的块大小但像内联元素一样流动。这意味着如果块不适合一行

这应该可行：

<div id="tags">
    <span class="keyword">Tag1</span>
    <span class="keyword">Tag2</span>
    <span class="keyword">Tag3</span>
    <span class="keyword">word1 word2 word3</span>
    <span class="keyword">A very long wordxxxxxxxxxxxxxx</span>
</div>

CSS：

#tags {
    width: 250px;
    border: 1px solid red;
}

.keyword {
    background: yellow;
    display:inline-block;
    margin:2px;
}

jsfiddle

【讨论】：