Reputation: 1959

How can I avoid line breaks in an inline element?

I am building a menu with horizontal main entries. Below each of the corresponding submenu titles are displayed vertically. Now, some longer menu titles are wrapped over several lines. Actually, the "sub" UL is just as wide as the longest single word in a submenu and all others are wrapped accordingly. I have given no width for the UL nor the LI (neither main nor sub menu).

My question is, how can I avoid breaking lines? Probably I could substitute each space with   (no-space character), but is there a different way to achieve this?

Upvotes: 38

Answers (4)

M K

Reputation: 9416

If you are using Bootstrap, you can use the utility css class text-nowrap. You can find it in the utility section of the docs.

<div style="width: 10px">
    <span class="text-nowrap">This line will not break, ever....!!!</span>
</div>

Upvotes: 24

Tom Harris

Reputation: 243

Further to M K's answer, the bootstrap utility class text-nowrap applies white-space: nowrap around it which will mean that any text inside of this class will not break onto a new line. This can be useful but can also be painful when designing responsive code.

If you have a piece of text that you would like to not break, it's best practice to wrap it around this instead of the parent element:

<div class="container">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in odio
        <span class="text-nowrap">lobortis,</span>
        condimentum ipsum in, vulputate felis. 
    </p>
</div>

Upvotes: 8