CSS Tutorial / CSS Overflow, Long Text Wrapping, and Ellipsis

The overflow property controls content that extends beyond a box, but it does not choose a useful text-wrapping strategy by itself. Combine deliberate overflow behavior with wrapping rules, and use ellipsis only when readers can still access the complete information.

Compare overflow values with identical content

The actual appearance of the scrollbar and whether it is always visible depends on the overlay scrollbar settings of the operating system and browser. Specifying scroll does not mean that the bar will remain visible in all environments. Hidden can also be scrolled by script or focus movement, so it does not mean that “the content itself has disappeared.” Clip, which completely prevents scrolling, is a separate value and should not be considered the same as hidden. The detailed operation is explained in MDN's overflow description. Before hiding the overflow, check how you set the height of the box that will contain the content using CSS Width, Height, min/max Limits, and box-sizing the height appropriate for the content.

If general text is treated as fixed height and hidden, information may disappear when adding sentences, translating, or enlarging characters. First consider leaving the height to the content, and use auto if size restrictions are needed, such as in a separate panel. The full example puts four identical sentences in the same 96px box and compares only the values. After the visible part, we left some extra space for practice so that the overflowing text does not obscure the following explanation.

Wrap long URLs and identifiers

.url { overflow-wrap: anywhere; }

URLs without spaces, identification codes, or long words may push the box out because there are not enough places for line breaks. overflow-wrap: anywhere gives the opportunity for a line break in the middle of the string if necessary. It does not delete the character itself or insert a line break character into the string value. Only the display changes, so you can keep the original string.

Applying word-break: break-all everywhere can break ordinary words unnecessarily. Start by allowing breaks in long-value regions. Flexbox and Grid can also impose automatic minimum sizes, so examine the relevant item's min-width separately. Wrapping text and allowing its box to shrink solve different parts of the problem. For further detail, see Please refer to MDN's overflow-wrap description, Flexbox Alignment, Wrapping, gap, grow, and shrink.

Meet the conditions for single-line ellipsis

.title {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

text-overflow itself does not determine the box size or line breaks. Multi-line abbreviation is also a separate method from this single-line example. The full example appears in the paragraph below with the full title so you can re-read the truncated text. Do not hide content that requires the original text, such as important instructions or error messages, without a way to check it elsewhere. We recommend that you do not use the title attribute's mouse tooltip as your only source of text. Please refer to MDN's text-overflow description.

Make scrollable panels keyboard accessible

<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
  <p>Notice content</p>
</div>

Depending on the browser, the scroll area may or may not automatically receive keyboard focus. By specifying tabindex="0" for the panel you need access to, you can navigate to it in the normal tab order. role="region" and a descriptive name help users of assistive technology understand which region they are in. You don't necessarily have to make every box the focus target or area.

The example gives keyboard access, a name, and a focus outline only to the auto·scroll panels that actually require scrolling. After entering with Tab, check if you can move to the last paragraph using the arrow keys or Page Down. On narrow screens, also ensure that there is a distinction between scrolling within the panel and scrolling the page.

Run the complete overflow example

Save and open the code below as UTF-8 in overflow.html. Includes all four panels of the same content, long URLs, and shortened titles to preserve the original text. The example.com address is a string that observes line breaks and is not an actual resource link.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing overflowing content</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
      border: 2px solid #777; background: #eef6fa; }
    .panel p { margin: 0 0 8px; }
    .visible { overflow: visible; }
    .visible-stage { padding-bottom: 240px; }
    .hidden { overflow: hidden; }
    .auto { overflow: auto; }
    .scroll { overflow: scroll; }
    .panel:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    .url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
    .title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .original { max-width: 320px; }
  </style>
</head>
<body>
  <h1>Overflow and truncation</h1>
  <section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
  <h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
  <p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>

1. Compare the last paragraphs of the four panels. In visible, it appears outside the border, in hidden, it is hidden, and in auto·scroll, it must be moved inside and readable.
2. Leave only one paragraph in the auto panel. When the content gets short enough, check to see if the scrolling space disappears and restore it to four paragraphs. Don't judge whether it's overflowing just by seeing the bar.
3. Move to the auto panel with Tab and check the contents below with the arrow keys. Make sure the focus outline is visible, then use Shift+Tab to move to the front target.
4. Turn off overflow-wrap declarations in URLs and narrow the window. Checks whether long strings overflow horizontally and then restores anywhere.
5. Change only the title's text-overflow to clip and compare the results of being cut without the ellipsis. Next, change nowrap to normal to check the result of line wrapping and return it to the original value.

If the entire page is pushed horizontally, check the minimum width/padding of the widest element and its parent. If the content to be read disappears, check the fixed height and hidden first. Before adding scrolling or ellipsis, you need to determine how to preserve the original text and whether it can be manipulated.