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-block用于子标记可以帮助您。

running demo

Answer 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

Answer 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

文字在错误的地方打破

3 个答案: