The many ways to deal with overflowing text

Styling text in CSS feels like it should be easy, but the edge cases and ways to handle them are unexpectedly complex.

In this guide, we’ll cover how to wrap, break, hyphenate, truncate text in various ways.

The problem

This is usually what happens if you don’t handle long words properly:

The word overflows the container. We certainly did not intend for that to happen, so here are all the different ways to fix this.

Wrapping text

Break only if text overflows

Most of the time, you just want your long words to wrap, the CSS property overflow-wrap: break-word will do the job.

Break only if text overflows, and minimize width

The overflow-wrap: anywhere property will wrap at word boundaries and affects the min-content width calculation. Unlike break-word, this property makes the container shrink more aggressively because it allows soft wrap opportunities anywhere, which affects how the browser calculates the minimum size needed.

Below, both boxes use width: min-content to show the key difference: anywhere affects min-content calculations (making containers narrower), while break-word does not.

Notice how overflow-wrap: anywhere creates a narrower box by breaking more aggressively. This makes it ideal for individual words, and not for whole paragraphs.

Break anywhere

If you don’t care about preserving word boundaries, and you just want your text to wrap, use the word-break: break-all property. This trades off readability for more compact text.

Force break at certain places with hyphens

Using ‐ (the hard hyphen character entity, U+2010), we can manually break up long words with hyphens that allow line breaks. This differs from the regular hyphen-minus character (-, U+002D) which typically doesn’t create break opportunities. This works with the default breaking algorithm without any CSS.

The longest word in the english dictionary is
"Pneumono‐ultra‐microscopic‐silico‐volcano‐coniosis"

Break at certain places with hyphens

Alternatively, using ­, also known as the soft hyphen character entity, hyphens will only appear when a word break occurs.

The longest word in the english dictionary is
"Pneumono­ultra­microscopic­silico­volcano­coniosis"

Break at certain places without hyphens

If you want to break up long words without hyphens, then the <wbr> html element is what you’re looking for.

The longest word in the english dictionary is "Pneumono<wbr />ultra<wbr />microscopic<wbr />silico<wbr />volcano<wbr />coniosis"

Automatically break with hyphens

By using the hyphens: auto property and an html lang attribute, we can let the browser decide when to insert a hyphen.

The browser will also prioritize ‐ and ­ if they are present.

<div lang="en">
  The longest word in the english dict&shy;ionary is
  "Pneumonoultramicroscopic&shy;silicovolcanoconiosis"
</div>

Customize hyphenation behavior

If auto-hyphenation looks too aggressive, dial it back with hyphenate-limit-chars, or even hyphenate-character to change the inserted glyph.

.product-descriptions {
  hyphenate-limit-chars: 8 4 3; /* total / prefix / suffix; auto is language-dependent */
  hyphenate-character: '‧';
}

This method is limited by the browser’s hyphenation rules. Its support also varies depending on the language and browser. Please use this method with care.

Truncating text

Aside from wrapping text, we can also truncate text to fit a fixed width.

Single-line truncation with ellipsis

When you need to truncate text to fit a fixed width (common in UI elements like labels, table cells, or card titles), you can use an ellipsis (...). This requires three CSS properties working together:

1. white-space: nowrap or white-space: pre - Prevents text from wrapping to multiple lines
2. overflow set to any value other than visible - Establishes a formatting context to hide the overflowing content
3. text-overflow: ellipsis - Displays the ellipsis character

All three are required. If you’re missing even one, the ellipsis won’t appear.

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

Single-line truncation

To truncate without ellipsis, use text-overflow: clip property to clip the text at the end of the container. You also need to set white-space: nowrap and overflow: hidden to prevent the text from wrapping.

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

Single-line truncation with fade effect

Combining text-overflow: clip and mask-image, you can use CSS mask-image to create a smooth fade-out effect. This works by applying a gradient mask that transitions from opaque to transparent, creating a visual fade at the edge of the container.

.text-overflow-fade {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    black 0%,
    black calc(100% - 7ch),
    transparent 100%
  );
}

Truncating multiple lines

While text-overflow: ellipsis only works for single lines, -webkit-line-clamp allows you to truncate text to a specific number of lines with an automatic ellipsis.

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines */
  -webkit-box-orient: vertical;
}

Note: This is a WebKit-specific property but is widely supported across all modern browsers. The ellipsis is added automatically.

Truncating multiple lines with ellipsis and fade effect

Combining -webkit-line-clamp and mask-image, you can add a smooth fade-out effect. Unfortunately, you cannot remove the ellipsis.

.line-clamp-3-fade {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines */
  -webkit-box-orient: vertical;
  /* Mask that fades only on the last line
   * Uses a combination of gradients to fade only the bottom-right area
   */
  mask-image:
    linear-gradient(
      to right,
      black 0%,
      black calc(100% - 7ch),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      black 0%,
      black calc(100% - 1lh),
      transparent 100%
    );
  /* Add both masks - content visible where either mask is opaque */
  mask-composite: add;
}

Progressive Enhancement Strategy

Layer text overflow techniques for maximum compatibility:

.product-title {
  /* Baseline: Wrap long words gracefully (widely supported) */
  overflow-wrap: break-word;

  /* Add hyphenation for languages with good support */
  hyphens: auto;
  lang: attr(lang);

  /* Optional: Limit to 2 lines on modern browsers */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

This approach ensures text never overflows while progressively enhancing the experience on capable browsers.

Real-World Scenarios

E-commerce product titles

Challenge: Product titles vary wildly in length. Some are “Mug”, others are “Professional Stainless Steel Coffee Grinder with Adjustable Settings”

Solution:

.product-card-title {
  overflow-wrap: break-word; /* Handle long words */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Dashboard metrics and labels

Challenge: Need compact single-line labels that gracefully handle overflow without breaking layout

Solution:

.metric-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* Constrain width */
}

Mobile app navigation

Challenge: Tab labels must fit in limited horizontal space across different screen sizes

Solution:

.tab-label {
  overflow-wrap: break-word;
  text-align: center;
  hyphens: auto;
  /* Allow wrapping on very narrow screens */
}

@media (min-width: 768px) {
  .tab-label {
    white-space: nowrap; /* Single line on wider screens */
  }
}

Alternate overflow-friendly UX patterns

Overflow is ultimately a UX problem. Sometimes the best fix is to change how much content you reveal.

Allow horizontal scrolling with context

For code samples, data tables, or URLs, horizontal scrolling keeps information intact. Pair overflow-x-auto with a fading mask or scroll shadow so users notice the affordance.

.overflow-x-auto-fade {
  white-space: nowrap;
  overflow-x: auto;
  mask-image: linear-gradient(
    to right,
    black 0%,
    black calc(100% - 7ch),
    transparent 100%
  );
}

Offer progressive disclosure

UX patterns like “Show more” buttons or the native <details> element avoid truncating critical information while keeping the default view compact.

<details>
  <summary>
    View full error message
  </summary>
  <div>
    Stack trace or verbose explanation goes here…
  </div>
</details>

Provide alternative surfaces for the full copy

Tooltips, copy-to-clipboard buttons, or modal previews let users inspect the entire string without forcing every layout to accommodate it. These approaches complement truncation and wrapping techniques rather than replacing them.