CODEWITHSUNDEEP
htmlcssline-breaks
user804546
user804546

Reputation: 1

Text breaks on the wrong place

community.

I've tried many things but I don't really get it why it's not working.

I want that these keywords don't break the line:

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

If a keyword is longer, it should float into the next line without breaking.

The code looks like this:

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>');

I've tried nowrap, white-space: pre, white-space: nowrap and some other things. But with "nowrap" or "white-space: nowrap;" the keywords run out of the window.

What can I do?

Upvotes: 0

Views: 405

Answers (3)

Chris
Chris

Reputation: 27609

This answer is based on Aaron Digulla's but with some modifications to make it more suitable (I feel). The key modification is replacing the white-space: nowrap with display: inline-block. The latter changes the keyword span into a mix of block and inline which means it will take a rigid block size but flow like an inline element. This means if the block wouldn't fit on a line

This should work:

<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

Upvotes: 0

Tushar
Tushar

Reputation: 4418

Use of display: inline-block for child tag can help you.

running demo

Upvotes: 1

Aaron Digulla
Aaron Digulla

Reputation: 328604

This should work:

<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

Upvotes: 0

Related Questions