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」または「空白: nowrap;」を使用すると、キーワードは窓の外に出ます。

私に何ができる？

Answer 1

この回答は Aaron Digulla のものに基づいていますが、より適切にするためにいくつかの変更が加えられています (私は感じています)。white-space: nowrap重要な変更は、をに置き換えることdisplay: inline-blockです。後者は、キーワードのスパンをブロックとインラインの混合に変更します。つまり、厳密なブロック サイズを使用しますが、インライン要素のようにフローします。これは、ブロックがラインに収まらない場合を意味します

これはうまくいくはずです：

<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 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