html - 文本在错误的位置中断

Question

社区。

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

我希望这些关键字不会打破界限：

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;” 关键字跑出窗口。

我能做些什么？

Answer 1

使用display: inline-blockfor child 标签可以帮助您。

running demo

Answer 2

这个答案是基于 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

Answer 3

这应该有效：

<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