Prevent line-break of span element

Applying white-space: nowrap

The most effective tool to prevent <span> elements from breaking into a new line is the white-space: nowrap; CSS rule.

.my-element { 
  white-space: nowrap; /* "Breaking lines"? I don't know her. */
}


It's like the CSS ninja stopping your text from dropping down stealthily. Ideal for menu items, button labels, and display messages where line breaks might ruin the user interface or obscure critical information. This CSS-only strategy keeps away JavaScript from dealing with layout details, ensuring faster performance and reduced bugs.

Meet   — The Classic Solution

Place   (non-breaking space entities) between words where you want to banish line breaks. This could be a feasible strategy for brief spans of text, but do remember using too many might turn your HTML into a cryptic treasure map.

<span>This&nbsp;is&nbsp;a&nbsp;non-line-breaking&nbsp;treasure&nbsp;map.</span>


Other white-space Actions

The white-space property can be set to other values to match a variety of needs:

• normal: This default squashes white space and adds breaks when needed. Great for poetry!
• pre: This one behaves like the <pre> HTML tag. It respects your spaces and line breaks.
• pre-wrap: This is like "pre", but it's flexible. It wraps text at the end of lines.
• pre-line: This one squashes white space but respects manual line breaks. It's the 'do it yourself' of CSS line breaks!

Correct selection of these properties gives you convenient layout precision.

Class-ing up your elements

Sometimes, a blanket nowrap isn't what you need. In such cases, use specific classes to define when to implement nowrap.

.non-breaking {
  white-space: nowrap; /* Stops text from taking "breaks" */
}

.breaking {
  white-space: normal; /* Lets text have its "breaks" */
}


This approach creates a balance between uniformity and adaptability in your document layout.