How to not wrap contents of a div?

html

flexbox

responsive-design

overflow

byNikita Barsukov·Aug 8, 2024

Preventing the contents of a div from wrapping can be achieved simply by applying the CSS rule white-space: nowrap;. Paired with it, overflow: auto; allows content exceeding div's width to be scrollable or you can choose overflow: hidden; to visually clip the overflow. Here's an example:

.no-wrap {
  white-space: nowrap; /* One liners only! */
  overflow: auto; /* Or set to 'hidden' to snip extra content */
}

With the HTML like this:

<div class="no-wrap">Content of a lonely, unwrapped line...</div>

Preserving content integrity

In cases where you wish to preserve the integrity of words or avoid unwelcome breaks, consider applying word-break: keep-all;. It is highly beneficial especially for non-English languages where breaking words can manipulate meaning.

Bringing order with flexbox

By setting display: flex; on a parent container, you can neatly align child elements in a row or column. It's somewhat similar to writing horizontally with no line breaks - unless your pen runs out of ink or your hand gets tired 😉.

The key benefit is that child content does not wrap, unless explicitly required using flex-wrap property.

Setting limits with min-width

An often overlooked min-width property allows you to set a limit below which your div cannot shrink, thus preventing content wrapping. It's as if you're saying "My div needs its personal space! At least this much!". Do bear in mind though, that it might give rise to overflow issues.

Backward compatibility: dances with older browsers

Dare to dance with older browsers:

The Float Waltz: Applying float: left; to child elements combined with white-space: nowrap; keeps the party line without anybody wandering off the dance floor.
IE Dance Moves: Pioneer dances like IE might need some old school steps, like CSS expressions or spacer elements, to properly understand the moves (like min-width).

Advanced handling of in-line content

In need of extra span control? Child elements can be transformed to display: inline-block; providing enhanced control over their position and spacing, while still avoiding those pesky wraps!

And sometimes, especially when flex and grid are not an option, good old fashioned spacer elements can save your layout.

Controlling overflow like a master

Handling overflow is a critical skill when you aim to ward off content wrapping:

Overflow Control: white-space: nowrap; is your magic spell, but overflow properties (auto, scroll, hidden) are your magic wands - choose wisely!
Responsive by Design: Clipping the content can look neater but needs thoughtful application for a stellar user experience.