html - 文本在错误的地方中断

Question

社区。

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

我希望这些关键字不会破坏行:

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

如果关键字较长，它应该不间断地 float 到下一行。

代码如下所示:

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