The Complete CSS Text Wrap Interactive Tutorial

What CSS text wrap actually means

When we say “text wrap”, we’re usually talking about one of these situations:

• Normal wrapping: text flows onto multiple lines when it hits the edge of its container.
• No wrapping: text stays on a single line and overflows (or gets clipped) instead.
• Smarter wrapping: the browser tries to make lines look nicer (balanced headings, fewer awkward “orphans”, etc.).
• Emergency breaking: long words / URLs that would overflow are allowed to break.

Modern CSS now has a dedicated family of properties for this, centered around text-wrap.

CSS text-wrap property

text-wrap is a shorthand that controls how text wraps inside an element. Under the hood, it bundles two longhands:

• text-wrap-mode (whether wrapping is allowed)
• text-wrap-style (how the browser chooses line breaks)

You can set the shorthand (text-wrap) most of the time, and reach for the longhands when you want to be extra explicit.

.demo {
  text-wrap: wrap;
}

.demo {
  text-wrap: nowrap;
}

.demo {
  text-wrap: wrap;
  max-width: 21ch;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  gap: 12px;
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo;
}

.demo {
  border: 3px solid #111;
  padding: 12px;
  width: 320px;
  background: #f5f5f5;
  line-height: 1.4;
}

.note {
  font-family: system-ui, Arial, sans-serif;
  max-width: 70ch;
  margin: 0;
}

  

    Click the snippets. Same text, different wrapping rules.
  

  

    This is a reasonably long sentence with a couple of commas, a dash, and a vibe. Watch how it reflows.
  

CSS text-wrap-mode

text-wrap-mode is the “can it wrap?” switch. The two big values are:

• wrap: allow wrapping (this is the normal default behavior for most text)
• nowrap: do not wrap (text stays on one line)

It overlaps conceptually with white-space, and in real projects you’ll see both. The modern approach is: use text-wrap for wrapping behavior, use white-space when you also care about spaces/newlines collapsing.

.demo {
  text-wrap-mode: wrap;
}

.demo {
  text-wrap-mode: nowrap;
}

.demo {
  white-space: nowrap;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.demo {
  width: 320px;
  border: 3px solid #111;
  padding: 12px;
  background: #f1f1f1;
  font-family: system-ui, Arial, sans-serif;
}

.hint {
  font-family: ui-monospace, SFMono-Regular, Menlo;
  margin: 0 0 10px 0;
}

Try each snippet and watch overflow/wrapping.

  Wrapping is polite. No-wrap is honest. Sometimes honesty spills outside the box.

CSS text-wrap-style

text-wrap-style is about where the browser chooses to break lines. The headline values you’ll care about:

• balance: tries to make lines in a multi-line heading more even (less “one tiny word on the last line”).
• pretty: tries to avoid awkward line breaks, especially “orphans” (a lone short word on the last line of a paragraph).

These are typography upgrades. They don’t magically fix every layout, but when they help, they help a lot.

CSS text-wrap: balance

text-wrap: balance is best on headings and short blocks of text. It makes multi-line headings look intentionally designed instead of “whatever the container width decided today”.

h2 {
  text-wrap: wrap;
}

h2 {
  text-wrap: balance;
}

h2 {
  text-wrap: pretty;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.card {
  border: 3px solid #111;
  padding: 16px;
  width: 460px;
  background: #fafafa;
  font-family: system-ui, Arial, sans-serif;
}

h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

p {
  margin: 10px 0 0 0;
  color: #333;
}

  

    A surprisingly useful guide to wrapping text so it stops looking weird
  
  

    Headings are where balance shines.
  

CSS text-wrap: pretty

pretty is typically aimed at paragraph text. The goal is fewer “ugly” breaks, especially the classic orphan: one tiny word stranded on the last line.

One important note: nicer wrapping can cost a bit more layout work. It’s usually fine for normal content, but you probably wouldn’t apply it to a giant list of thousands of items without testing.

p {
  text-wrap: pretty;
}

p {
  text-wrap: wrap;
}

p {
  text-wrap: pretty;
  max-width: 44ch;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.box {
  border: 3px solid #111;
  padding: 16px;
  width: 540px;
  background: #f6f6f6;
  font-family: system-ui, Arial, sans-serif;
}

p {
  margin: 0;
  line-height: 1.5;
  font-size: 16px;
}

  

    This paragraph is intentionally long enough to wrap onto several lines, so you can spot awkward breaks and little orphan words at the end.
  

CSS text wrap to next line

Most “why won’t it go to the next line?” problems come down to: there’s no legal break opportunity or you told it not to wrap.

Here are the most common reasons text won’t wrap to the next line:

• The element isn’t constrained: if the container can grow forever, text doesn’t need to wrap.
• No-wrap is active: text-wrap: nowrap or white-space: nowrap.
• It’s one unbroken token: like a long URL or thisIsFineThisIsFineThisIsFine.

When you want to allow a break inside a long token, use either CSS (overflow-wrap) or HTML’s <wbr> (“word break opportunity”).

.code {
  text-wrap: wrap;
}

.code {
  text-wrap: nowrap;
}

.code {
  text-wrap: wrap;
  overflow-wrap: anywhere;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.panel {
  border: 3px solid #111;
  padding: 14px;
  width: 360px;
  background: #fbfbfb;
  font-family: ui-monospace, SFMono-Regular, Menlo;
  line-height: 1.4;
}

.code {
  padding: 10px;
  background: #eee;
  border: 2px dashed #111;
}

  

    https://example.com/some/really/really/really/long/path/that/does/not/want/to/wrap/nicely
  
  

    Tip: You can also insert a <wbr> in HTML where a break is allowed.
  
  

    like-this:<wbr>is-a<wbr>controlled<wbr>break
  

CSS text wrap break word

If you’re searching for “text wrap break word”, you usually want overflow-wrap (historically also called word-wrap). This is the “break a long word if it would overflow” tool.

• overflow-wrap: normal; means “only break where normal rules allow”.
• overflow-wrap: break-word; allows breaking long tokens if needed.
• overflow-wrap: anywhere; is more aggressive: it can break almost anywhere to prevent overflow.

.demo {
  overflow-wrap: normal;
}

.demo {
  overflow-wrap: break-word;
}

.demo {
  overflow-wrap: anywhere;
}

.demo {
  word-break: break-all;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.demo {
  width: 320px;
  border: 3px solid #111;
  padding: 12px;
  background: #f2f2f2;
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.4;
}

.long {
  font-family: ui-monospace, SFMono-Regular, Menlo;
}

  

    SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
  
  

    Notice how word-break: break-all can make text harder to read. It’s a last resort.
  

A quick “which one should I use?” recommendation

• If you just need to prevent overflow from rare long tokens, try overflow-wrap: break-word.
• If you’re dealing with untrusted content (usernames, long IDs) and overflow is common, consider overflow-wrap: anywhere in that specific component.
• Avoid word-break: break-all for normal paragraphs. It can split any word and looks… crunchy.

CSS text wrap no wrap

To force “no wrap”, you have two common approaches:

• text-wrap: nowrap; (modern wrapping control)
• white-space: nowrap; (classic, also affects whitespace collapsing and newline handling)

In UI components like tags, breadcrumbs, or a “price + unit” label, no-wrap is very useful. Just remember to pair it with an overflow strategy (clip, scroll, or ellipsis).

.pill {
  text-wrap: nowrap;
}

.pill {
  white-space: nowrap;
}

.pill {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.row {
  display: grid;
  gap: 10px;
  padding: 16px;
  width: 360px;
  border: 3px solid #111;
  background: #fafafa;
  font-family: system-ui, Arial, sans-serif;
}

.pill {
  display: inline-block;
  max-width: 220px;
  padding: 8px 10px;
  border: 2px solid #111;
  background: #ededed;
  border-radius: 999px;
}

  

    This is a single UI pill that might need to stay on one line
  
  

    When no-wrap is active, you usually want to decide how overflow behaves.
  

CSS text wrap around image

When people say “wrap text around an image”, they usually mean floating an image so text flows beside it.

• float: left; makes inline text wrap around the floated element.
• shape-outside (optional) can make the wrap follow a circle/ellipse/polygon instead of a rectangle.

This is old-school CSS, but still useful for editorial layouts.

.media img {
  float: left;
  width: 160px;
  height: 160px;
  margin: 0 14px 10px 0;
}

.media img {
  float: left;
  width: 160px;
  height: 160px;
  margin: 0 14px 10px 0;
  border-radius: 50%;
  shape-outside: circle(50%);
}

.media img {
  float: right;
  width: 160px;
  height: 160px;
  margin: 0 0 10px 14px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.media {
  width: 520px;
  border: 3px solid #111;
  padding: 16px;
  background: #f6f6f6;
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.55;
}

.media img {
  display: block;
  object-fit: cover;
  border: 3px solid #111;
}

  
  Wrapping text around images is mostly a float story. The paragraph flows beside the image and continues below once it runs out of vertical space.
  If you use shape-outside with a circle, the text follows a curved edge, which looks more like a magazine layout.
  This can be a fun touch, but keep it readable and don’t fight your content.

Learn more about floats in the CSS Float Interactive Tutorial.

CSS text wrap ellipsis

Ellipsis is not “wrapping” so much as “truncating”. There are two common patterns:

• Single-line ellipsis: one line only, shows … when clipped.
• Multi-line clamp: show N lines, then cut off with an ellipsis (browser support varies).

Single line ellipsis

Single-line ellipsis uses text-overflow: ellipsis, but it needs a specific combo to work:

• a constrained width (or max-width)
• white-space: nowrap (or an equivalent no-wrap setting)
• overflow: hidden

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.title {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.card {
  width: 360px;
  border: 3px solid #111;
  padding: 14px;
  background: #fafafa;
  font-family: system-ui, Arial, sans-serif;
}

.title {
  width: 260px;
  border: 2px dashed #111;
  padding: 10px;
  background: #eee;
  font-size: 16px;
}

  

    This is a very long title that will not fit, and that is exactly the point of this demo
  
  

    Tip: If the text is allowed to wrap (white-space: normal), the ellipsis usually won’t behave like you expect.
  

Multi line clamp ellipsis

For multi-line truncation, the most common “works in many browsers” approach is the WebKit line-clamp pattern:

• display: -webkit-box
• -webkit-box-orient: vertical
• -webkit-line-clamp: 3 (or another number)
• overflow: hidden

.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.box {
  width: 410px;
  border: 3px solid #111;
  padding: 16px;
  background: #f6f6f6;
  font-family: system-ui, Arial, sans-serif;
}

.excerpt {
  border: 2px dashed #111;
  background: #eee;
  line-height: 1.55;
}

  

    This is a longer chunk of text designed to spill onto multiple lines. The goal is to show a clean “preview” that doesn’t take over the whole layout.
    With line clamping, you can show a few lines, then truncate. Just remember: truncated content should still be accessible (for example, by linking to the full article).
  

Learn more about text-overflow: ellipsis; and -webkit-line-clamp in the CSS Ellipsis Interactive Tutorial.

CSS text wrap not working and debugging checklist

• Check for no-wrap: search your CSS for text-wrap: nowrap and white-space: nowrap.
• Check the container: wrapping needs a constraint like width, max-width, grid/flex sizing, etc.
• Look for long unbroken tokens: URLs, hashes, long file names. Fix with overflow-wrap: break-word or anywhere.
• Ellipsis needs the magic trio: constrained width + overflow: hidden + no-wrap.
• Be careful with flex: in a flex row, text items sometimes refuse to shrink. Adding min-width: 0 to the flex child often fixes wrapping in real layouts.

If you want a deeper dive into the whole ecosystem (wrapping, breaking, hyphenation), MDN’s guide is excellent: Wrapping and breaking text (MDN).

Quick recap

• Use text-wrap for modern wrapping control (wrap, nowrap, balance, pretty).
• Use overflow-wrap when you need to break long words/URLs.
• Use text-wrap: balance for headings, text-wrap: pretty for paragraphs (as progressive enhancement).
• Ellipsis is truncation: single-line via text-overflow, multi-line via line-clamp patterns.

CSS Text Wrap Conclusion

Text wrapping is a fundamental part of web typography, and modern CSS gives us powerful tools to control it. Whether you want to balance a heading, prevent awkward orphans in paragraphs, or handle long URLs gracefully, there’s a CSS property that can help.