Text Overflow and Ellipsis in CSS

What You Learn From This Page

• How text overflow begins and how CSS can wrap, clip, scroll, or truncate it.
• Why ellipsis requires constrained space, clipping, and suitable white-space behavior.
• How single-line truncation works inside normal, Flexbox, and Grid layouts.
• How multi-line clamping differs from ordinary text-overflow.
• When truncation is appropriate and how users can reach the complete content.
• How to debug responsive, localization, accessibility, and intrinsic-sizing failures.

Introduction

Text overflow occurs when inline content needs more space than its container can provide. A product name may exceed a card width, a file name may stretch a toolbar, or a user-generated label may be much longer than the design sample. CSS can allow that content to wrap, break long sequences, scroll, clip at the boundary, or display an ellipsis that signals hidden text.

The familiar three-dot result is useful, but it is not a complete content strategy. An ellipsis changes presentation; it does not shorten the source string, explain what was hidden, or guarantee access to the full value. A robust implementation combines correct layout constraints with a deliberate usability decision about which information may be concealed and how users can recover it.

What Is Text Overflow?

Every element receives an available inline size from layout. Text is shaped into inline boxes and normally wraps at allowed break opportunities. Overflow begins when the resulting content extends beyond the box because wrapping is prevented, a word or token cannot break, the width is constrained, or another layout rule leaves insufficient space.

.title {
  inline-size: 12rem;
}

With ordinary wrapping, a sentence may continue onto another line and increase the element's height. With an unbreakable value or white-space: nowrap, the line can extend beyond the box. The next CSS choices determine whether that extension remains visible, becomes scrollable, is clipped, or receives an ellipsis.

What text-overflow Controls

The text-overflow property controls how clipped inline content is represented at a line edge. Its stable values are clip and ellipsis. It applies to block containers and is not inherited. Most importantly, it does not force a width constraint, disable wrapping, or clip content by itself.

.label {
  text-overflow: ellipsis;
}

This declaration alone often creates no visible change. The browser needs actual inline overflow and an overflow mode that clips the content before there is anything for text-overflow to represent.

text-overflow: clip

clip is the initial value. When inline content is clipped at the line edge, no continuation marker is added. A character can be partially visible where the clipping boundary intersects its rendered area, and users receive no visual indication that more text exists beyond the box.

.reference-code {
  inline-size: 10rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

Clipping may be acceptable for decorative or redundant content, but it is a weak choice when the hidden ending distinguishes one value from another. The absence of a marker can make a broken layout look like complete content.

text-overflow: ellipsis

ellipsis asks the browser to render an ellipsis character at the visual end edge of the clipped line. The browser hides enough inline content to make room for the marker. In language, script, or writing-mode contexts, the user agent can use an appropriate equivalent when necessary.

.title {
  inline-size: 14rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

The marker indicates omission but does not identify the omitted words. It should therefore be used only when users can still understand the item or reach its complete value elsewhere.

Why Ellipsis Does Not Work Alone

There are four practical conditions in the classic single-line pattern. The element needs limited available space, the text must remain on one line, overflowing painting must be clipped, and text-overflow must request the ellipsis. If the element expands to its content or the sentence wraps, there may be no clipped inline overflow to mark.

.truncate {
  max-inline-size: 18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

When troubleshooting, verify these conditions independently rather than repeatedly adding text-overflow: ellipsis. Most failures are sizing or layout failures, not problems with the ellipsis value.

The Complete Single-Line Pattern

A reusable single-line utility can provide clipping, no wrapping, and an ellipsis. The component or parent layout should provide the meaningful size constraint. Keeping the width outside the utility allows the same truncation behavior to work in cards, tables, menus, and flexible rows.

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

Do not add this utility globally. Truncation is a content decision and should be visible in component code, review, and testing.

Creating a Real Size Constraint

A fixed width is not required. A maximum inline size, a grid track, a flex item, or the available width of a responsive container can all create the necessary limit. The important point is that the used inline size must be smaller than the content's unwrapped size.

.username {
  max-inline-size: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Logical inline-size and max-inline-size adapt more naturally to alternate writing modes than physical width declarations. Use them when the requirement concerns the text's inline axis.

The Role of white-space: nowrap

Normal text commonly wraps at spaces and other language-appropriate opportunities. white-space: nowrap suppresses those soft wraps, keeping the content on a single line. If that line becomes wider than the constrained box, inline overflow occurs.

.subject {
  white-space: nowrap;
}

No-wrap is useful for compact names, subjects, and identifiers, but it also increases overflow risk. Avoid applying it to instructions, errors, or prose whose full meaning requires several lines.

The Role of overflow

The overflow property determines how content outside an element's padding box is handled. In the traditional ellipsis pattern, a non-visible overflow value creates clipping. hidden is widely used, while clip can express clipping without establishing a scrolling mechanism where supported and suitable.

.compact-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

Overflow affects more than text. It can clip focus indicators, shadows, menus, and positioned descendants. Apply it to the narrow text wrapper rather than a large interactive component whenever possible.

text-overflow Does Not Change the DOM

Ellipsing is a rendering decision. The original text remains in the document, continues to participate in relevant layout calculations, and can remain available to scripts and assistive technologies. The visible three dots are not a replacement string inserted into the HTML.

This distinction is useful but not sufficient for accessibility. A value existing in the DOM does not guarantee that every user can conveniently discover the hidden portion. The interaction design must still provide an appropriate full-text path.

Inline Direction and the Ellipsis Edge

The ellipsis appears at the visual end edge of the overflowing line. In left-to-right content, that is commonly the right side. In right-to-left content, it may appear on the left. Bidirectional lines containing numbers and multiple scripts can produce results that differ from simple visual assumptions.

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

Use accurate dir and lang attributes and test realistic bidirectional strings. Avoid drawing a manually positioned three-dot pseudo-element on a fixed physical side.

Responsive Ellipsis

Responsive truncation should follow available component space rather than a single viewport-based pixel width. A title can fill its grid or flex track and truncate only when neighboring content reduces the remaining area.

.card-title {
  inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Test container widths between breakpoints, browser zoom, and text resizing. A desktop viewport can still contain a narrow card, and a mobile layout may choose wrapping rather than truncation because vertical space is cheaper than lost meaning.

Product Card Pattern

Product cards often need consistent visual rhythm while titles come from a catalog. A one-line title may be appropriate when the image and destination page provide context, but users should still be able to distinguish similar products.

.product-card {
  inline-size: min(100%, 22rem);
}

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

If model numbers or capacity values occur at the end, end truncation can hide the most important difference. Consider two lines, a separate variant field, or a layout that preserves distinguishing data.

Usernames and Account Names

User-controlled names can be unexpectedly long, contain unbroken sequences, or use scripts with different average glyph widths. A compact account menu can truncate the visual label while the profile page and accessible name preserve the full identity.

.account-name {
  max-inline-size: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Never use the shortened visual rendering as a unique identity check. Show another stable identifier when two names could become visually identical after truncation.

File Names Need Special Care

File extensions, dates, version numbers, and suffixes often occur at the end, exactly where ordinary end ellipsis hides content. A file list that displays several entries as quarterly-report... may prevent users from choosing the correct document.

Separate the base name and extension when the extension matters, preserve a meaningful suffix, allow wrapping at selected punctuation, or reveal the full name in an accessible details region. The correct strategy depends on whether users browse, compare, rename, or download the file.

Table Cell Truncation

Long descriptions can force a table wider than its container. A constrained cell wrapper can truncate secondary text, but the table's sizing algorithm and the wrapper's actual used width must allow overflow to occur.

.table-value {
  max-inline-size: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Provide row details or an expandable view for the complete value. Critical statuses, error reasons, and values users must compare should not be silently shortened merely to avoid horizontal scrolling.

Navigation and Breadcrumbs

Dynamic navigation labels and deep breadcrumb paths can overflow compact headers. Truncation can protect layout, but hiding the current location or two similar ancestors can reduce orientation. Breadcrumbs often benefit from collapsing earlier segments while preserving the current page name.

On narrow screens, consider a scrollable breadcrumb, selective segment removal with accessible context, or wrapping before applying ellipsis to every item. Navigation clarity is more important than keeping one perfectly uniform line.

Ellipsis Inside Flexbox

A common production failure occurs when a flex item refuses to become narrow enough for its text to overflow internally. Flex items have an automatic minimum size that can be influenced by their content. The long unwrapped text may therefore force the row wider instead of shrinking and displaying an ellipsis.

.user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-row__content {
  min-inline-size: 0;
  flex: 1;
}

Apply the truncation rules to the text element inside that shrinkable area. The exact element needing the zero minimum is the flex item whose content-based minimum blocks shrinking.

Why min-inline-size: 0 Matters

The initial minimum inline size is auto. In a flex formatting context, that automatic minimum can preserve the content's minimum contribution. An unbroken line can then dictate the item's minimum width even when flex-shrink is enabled.

.flexible-copy {
  min-inline-size: 0;
}

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

Setting the logical minimum to zero explicitly permits the item to shrink below its intrinsic content width. This is not an ellipsis hack; it is a sizing decision that creates the constrained box ellipsis requires.

Nested Flex Items

Real interfaces often contain a flex row inside another flex item. Setting min-inline-size: 0 only on the innermost title may not help if an ancestor flex item still preserves its content-based minimum. Trace the complete chain from the constrained outer container to the text.

Use DevTools to inspect item boundaries and computed minimum sizes. Apply zero minimum only to the flexible wrappers that should be allowed to shrink, not indiscriminately to every element.

Ellipsis Inside Grid

Grid tracks can also honor intrinsic minimum contributions. A track written as 1fr may not shrink as far as expected when it contains long unbreakable text. The grid can overflow before the text wrapper receives a narrow enough used size.

.result-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
}

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

The zero minimum in minmax(0, 1fr) allows the flexible track to shrink below its content-based minimum when the design intends truncation.

1fr Versus minmax(0, 1fr)

A fractional track distributes available space, but its minimum sizing behavior can still be content-sensitive. minmax(0, 1fr) explicitly sets a zero minimum and a flexible maximum. That distinction becomes visible with long file names, URLs, codes, or no-wrap titles.

Do not replace every fractional track automatically. Use the zero-minimum form where the track is expected to shrink and its content has an intentional overflow strategy.

Single-Line and Multi-Line Truncation

The standard text-overflow ellipsis pattern is fundamentally associated with clipped inline content at a line edge, typically a single no-wrap line. Multi-line truncation limits the number of visible line boxes and discards or hides later content. It is a related interface outcome but a different mechanism.

Choose one line for compact identifiers or labels. Use a small line clamp for summaries where some reading context is valuable. Allow unrestricted wrapping for instructions and critical messages.

The Established Multi-Line Clamp Pattern

A widely deployed compatibility pattern combines display: -webkit-box, vertical box orientation, a prefixed line clamp, and hidden overflow. Despite its historical syntax, it remains common in production for fixed-line card descriptions.

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

Test target browsers, nested markup, padding, links, and dynamic content. Clamping an interactive descendant can hide controls or create a partially visible link, so summaries should generally contain simple text.

The Evolving line-clamp Property

CSS Overflow Level 4 defines line-clamp as a shorthand related to line limits, continuation behavior, and block ellipsis. The specification remains newer work, and implementation details and support should be checked before relying exclusively on the unprefixed form.

.summary {
  line-clamp: 3;
}

A progressive pattern can include the standardized declaration while retaining a tested compatibility fallback. Avoid presenting evolving syntax as universally interchangeable without testing the browser matrix.

Two-Line and Three-Line Components

Two lines often suit compact product or search cards, while three lines can preserve more context for articles and courses. The number should come from the component's information hierarchy, not from a desire to make every card identical at any cost.

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

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

Keep the full source content available on the destination page or through an explicit expansion control when users need it.

text-overflow Versus overflow-wrap

text-overflow represents text that has already been clipped. overflow-wrap creates additional break opportunities so an otherwise unbreakable sequence can wrap and remain visible. One hides excess content; the other helps preserve it.

.long-message {
  overflow-wrap: anywhere;
}

For URLs, generated identifiers, and user input in flexible content areas, wrapping may be a better solution than ellipsis. Choose according to whether complete information or compact height has priority.

text-overflow Versus word-break

word-break controls line-breaking opportunities within words or script runs. Values such as break-all can break Latin text between arbitrary characters, which may keep a box narrow but reduce readability. It does not create an ellipsis.

.machine-token {
  word-break: break-all;
}

Use aggressive breaking for machine-oriented strings only when necessary. Human-readable prose usually benefits from language-aware wrapping or overflow-wrap.

text-overflow Versus overflow

overflow governs content extending outside a box in general. It can expose scrollbars, create a scroll container, hide painting, or clip content. text-overflow only specifies the visual representation of clipped inline overflow at a line edge.

The two properties often appear together because clipping creates the condition and text-overflow chooses the marker. They remain separate responsibilities and can affect different kinds of content.

text-overflow Versus white-space

white-space controls collapsing, preservation, and wrapping behavior. In the classic pattern, nowrap ensures a single line so that excess inline content reaches the clipping edge. Text-overflow then represents that clipped ending.

If white-space allows wrapping, the element may grow vertically and never overflow at the inline edge. That can be exactly the desired result for important content.

Wrapping Before Truncating

Ellipsis should not be the default response to every narrow container. Wrapping preserves information and often works well when card height can expand. Breaking long tokens can solve overflow without hiding content. A responsive layout can also move secondary actions or metadata onto another row.

.important-title {
  overflow-wrap: anywhere;
}

Use truncation when compactness has genuine value and the omitted portion is recoverable. Use wrapping when users need the complete wording to decide or act.

Accessibility Risks of Truncation

Two values can look identical after truncation even though their hidden endings differ. A shortened report year, account number, medication name, or payment error can cause a serious mistake. Screen magnification also reduces available visual width and increases how much content is hidden.

Classify information before applying ellipsis. Critical labels, validation messages, security warnings, legal text, and instructions should normally wrap. Decorative summaries and secondary metadata are safer candidates.

Provide Access to the Full Text

When useful information is truncated, provide a device-independent method to reveal it. Options include an expand and collapse control, a details panel, a dedicated destination view, a focusable disclosure, or a tooltip component designed for pointer, keyboard, touch, and assistive technology.

The reveal should be discoverable, dismissible where appropriate, and available without precise pointer movement. It should not obscure nearby controls or vanish while the user moves focus into it.

Why title Is Not a Complete Solution

The HTML title attribute may produce a native tooltip in some desktop pointer environments, but its timing, appearance, keyboard exposure, touch behavior, and assistive-technology support are inconsistent. It should not be the only route to essential text.

<span class="truncate-one-line"
      title="Introduction to Advanced CSS Development">
  Introduction to Advanced CSS Development
</span>

For low-importance convenience it can be supplemental. For required information, use visible text or a properly implemented disclosure pattern.

Do Not Truncate Form Errors

Error messages explain what failed and how to recover. Hiding the ending can remove the field requirement, accepted format, or next action. Allow errors to wrap naturally and ensure their container grows with user text settings.

.field-error {
  white-space: normal;
  overflow-wrap: anywhere;
}

The same principle applies to warnings, consent language, account lockout guidance, and destructive-action confirmations.

Localization and Content Expansion

Translations can be substantially longer than source-language labels. Different scripts also have different glyph widths and line-breaking rules. A component tuned to an English sample may truncate every translated label before its distinctive word appears.

Test representative languages, bidirectional content, long names, compound words, and strings without spaces. Do not use ellipsis to hide a localization problem that should be solved through flexible layout or better content structure.

Zoom and User Text Settings

Browser zoom, larger default fonts, and user spacing overrides reduce the amount of text that fits in a fixed visual region. A label that is complete at the design's default size may collapse to a vague prefix when magnified.

Test at 200 percent zoom and with increased letter, word, line, and paragraph spacing. Permit controls to grow or reflow where complete labels are needed for operation.

Interactive Content and Clipping

Applying overflow hidden to a broad component can clip focus outlines, popovers, badges, or child controls. The visual fix for one title can therefore create an accessibility failure elsewhere. Scope clipping to a dedicated text wrapper with no interactive descendants.

.row__text-clip {
  min-inline-size: 0;
  overflow: hidden;
}

Keep buttons and menus outside that wrapper. Verify focus at every responsive width.

Print, PDF, and Export Considerations

A compact on-screen table may use ellipsis because users can open a row. Printed or exported output may not preserve that interaction. If the report is intended to stand alone, print styles should often remove no-wrap truncation and allow the complete value to wrap.

@media print {
  .truncate-one-line {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

Inspect actual PDF and Word output because font substitution and page dimensions can change line breaks. Do not certify or archive records with meaningful identifiers visually hidden.

Common Mistake: Only Setting text-overflow

A declaration of text-overflow: ellipsis without clipped inline overflow does nothing visible. The element may still expand or wrap normally. Add rules only after deciding how the element receives constrained space and why hiding content is acceptable.

Common Mistake: No Width Constraint

If an element is free to reach its max-content width, the text fits and no overflow occurs. A parent layout must offer less space than the unwrapped content requires. Inspect the used size rather than assuming width: 100% is a constraint in every formatting context.

Common Mistake: Forgetting nowrap

In a standard single-line pattern, allowing soft wraps lets the text move to another line rather than overflow at the inline edge. Add white-space: nowrap when one line is truly required. If multiple lines are acceptable, use wrapping or an intentional line-clamp strategy instead.

Common Mistake: Ignoring Intrinsic Sizing

Flex and Grid containers can preserve minimum content contributions. The text wrapper may remain as wide as its unbroken content and push the entire layout outward. Check min-inline-size: 0 on the appropriate flex item or minmax(0, 1fr) on the intended grid track.

Common Mistake: Fixed Widths Everywhere

A hard-coded width that matches one screenshot can fail under different fonts, translations, zoom, sidebars, and device sizes. Prefer container-driven sizing, logical maximums, and flexible tracks. Fixed dimensions are appropriate only when the component's format is genuinely fixed.

Common Mistake: Truncating Everything

A universal overflow rule hides defects and information across the interface. It can shorten headings, buttons, error text, labels, and user data without review. Keep truncation explicit and component-specific so its content impact is visible during code review.

Common Mistake: Hiding Distinguishing Suffixes

Ordinary ellipsis removes the visual end of a line. File extensions, years, version numbers, regional identifiers, and account endings often live there. Restructure the content or preserve a separate suffix rather than assuming the beginning is always the important portion.

Testing Strategy

Test empty, short, average, extremely long, unbroken, punctuated, and bidirectional values. Include production fonts and fallbacks, every supported language, browser zoom, custom text spacing, and narrow containers created by sidebars or split views.

Verify normal flow, Flexbox, Grid, tables, cards, menus, search results, and print. Confirm that users can reach complete text and that focus indicators, actions, and tooltips are not clipped.

Debugging Checklist

Inspect the target's used inline size, display role, white-space value, overflow value, and text-overflow value. Temporarily add an outline and compare scroll width with client width. If the box is not narrower than the content, investigate its parent layout and intrinsic minimum.

For flex layouts, walk up through nested flex items and inspect minimum sizes. For grids, inspect track sizing. For line clamps, verify browser support and the complete prefixed pattern. Remove declarations one at a time until the actual overflow mechanism is clear.

Property Comparison

Common Interview Questions

What does text-overflow do? It specifies how clipped inline overflow is represented at a line edge.

What are its common values? The stable values are clip and ellipsis.

How do you create a single-line ellipsis? Constrain the inline size, prevent wrapping, clip overflow, and set text-overflow to ellipsis.

Why is white-space: nowrap used? It keeps the content on one line so excess text reaches the inline clipping edge.

Why can ellipsis fail in Flexbox? A flex item's automatic minimum size may stop it shrinking; the intended flexible item may need min-inline-size: 0.

What Grid pattern often helps? A shrinkable track such as minmax(0, 1fr) can permit the content area to become narrow enough to overflow internally.

Does ellipsis remove content from the DOM? No. It changes rendering, not the underlying string.

How is overflow-wrap different? It helps long content break onto more lines instead of representing a clipped ending.

How do you limit text to several lines? Use a supported line-clamp solution, commonly the tested legacy WebKit pattern with vertical orientation and hidden overflow.

Is the title attribute enough to reveal truncated text? No. Its interaction and accessibility behavior is inconsistent, especially for touch and keyboard users.

Practical Review Checklist

• Confirm that hiding part of the content is acceptable.
• Provide a real inline-size constraint.
• Use nowrap only when one line is intentional.
• Clip overflow on the smallest suitable text wrapper.
• Use min-inline-size: 0 on shrinkable flex items when required.
• Use minmax(0, 1fr) for Grid tracks that must shrink below content size.
• Distinguish single-line ellipsis from multi-line clamping.
• Allow errors, instructions, warnings, and legal text to wrap.
• Provide keyboard, touch, and assistive access to useful hidden text.
• Test translations, bidirectional text, long tokens, zoom, and text spacing.
• Restore complete content in print or export when interaction is unavailable.
• Verify that clipping does not hide focus indicators or controls.

Key Takeaway

text-overflow: ellipsis is the final part of a layout relationship, not a standalone command. The classic one-line pattern needs constrained available space, no wrapping, clipped overflow, and an ellipsis marker. Flexbox and Grid may also require explicit zero minimum sizing so the intended content region can actually shrink.

Use truncation as an information-design choice. Prefer wrapping when complete wording matters, clamp summaries only when a full version is reachable, and never hide recovery instructions or critical distinctions for visual uniformity. A strong implementation survives dynamic data, localization, zoom, small containers, and export while giving every user a dependable path to the complete content.