Avoid line break between HTML elements

The CSS solution: white-space and display properties

Use of CSS property: white-space

Apply white-space: nowrap; in CSS to prevent text and inline elements from scattering onto a new line. It is a boon for navigation menus or buttons where elements need to stick together like best friends. This property sets a friendly table in all modern browsers, promising universal support.

Implementing inline display

Used with display: inline; or display: inline-block;, elements become sidekicks, sticking together in thick and thin. This technique is useful when you have text and other inline elements (like icons or buttons) that you want to group together like a band. Simple yet effective, this solution guarantees a harmonious layout.

Older methods: nobr and nowrap

Even though the nobr is a non-standard rebel and nowrap has an obsolete status, they are still invited to the party as they are universally supported. Use nobr to bind the text or elements in one line or nowrap with td in tables to prevent the contents of table cells from wrapping. However, the CSS solution is your best bet, always.

Extending your toolkit: spans, zero-width joiners, overflow control and empty elements

Span element: your layout's best friend

Create a <span> with a class .nobr, and give it a nice jacket of white-space: nowrap; using CSS. This span can now hug any element you wish to keep together in a single line.

Handling spacing with zero-width joiner

For tight control over spacing, the zero-width joiner (‍) is your secret weapon. This can be placed between characters or elements without causing breaks, acting as an invisible bond that brings elements together without causing line breaks.

Overflow control: keeping things within boundaries

Size matters in web design. The width and overflow properties (e.g. overflow: hidden;, overflow: scroll;) can control how content wraps across lines. Restricting width can keep content on a single line, while the overflow can be hidden or made scrollable.

How to handle empty elements or icons

Empty elements can sometimes cause unnecessary breaks. Here, an image representation might be more predictable than pseudo-elements or before/after content. Alternatively, wrapping the element with a span using CSS display: inline; can do wonders.