CSS text-overflow: ellipsis Not Working on Links

You will learn the conditions required for CSS ellipsis truncation and why it commonly fails on links. In particular, you will see how an element’s display type affects whether its width, height, and overflow rules can take effect.

text-overflow: ellipsis displays ... when text cannot fit inside an element’s available inline space. It does not make an element narrower by itself; the browser must first have a constrained box from which text can overflow.

For the usual one-line ellipsis pattern, these rules work together:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

The element also needs a usable width or another layout constraint.

The key issue with the original CSS is that an <a> element is display: inline by default. Normal inline elements do not use width and height in the way block-level boxes do. Since the link is allowed to grow to fit all of its text, there is no horizontal overflow to truncate.

Set the link to inline-block or block so its width: 140px applies. Then the extra text can overflow, be clipped, and be represented with an ellipsis.

Imagine text overflow as a long ribbon inside a fixed-width tray:

• width defines the tray’s size.
• white-space: nowrap keeps the ribbon on one line instead of folding it.
• overflow: hidden hides the part hanging outside the tray.
• text-overflow: ellipsis puts ... at the visible end when text is hidden.

An inline link is not acting like a fixed-width tray. It expands with the ribbon. Changing it to inline-block or block gives it a real tray with a measurable width.

Use inline-block when a link should remain inline with surrounding content but still accept a width. Use block when it should occupy its own line or fill a layout area.

.app a {
  display: inline-block;
  width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  text-align: center;
  text-decoration: none;
  color: #000;
}

<div class="app">
  <a href="/details">Test Test Test Test Test Test</a>
</div>

The link is now a 140-pixel-wide box. Because its text stays on one line and cannot all fit, the browser hides the excess and displays an ellipsis.

If the link should fill the width of its parent, use a block link instead:

.app a {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Consider this CSS:

.app a {
  display: inline-block;
  width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

And this HTML:

<a href="/details">Test Test Test Test Test Test</a>

1. The browser creates an anchor element containing the text.
2. display: inline-block makes the anchor participate inline while also creating a box that honors width.
3. width: 140px limits that box to 140 pixels.
4. white-space: nowrap prevents the browser from moving later words onto a second line.
5. The text is wider than 140 pixels, so it overflows horizontally.
6. overflow: hidden clips the text outside the box.
7. text-overflow: ellipsis replaces the visible end of the clipped line with an ellipsis when the browser can do so.

The exact word where truncation occurs depends on the active font, font size, letter spacing, and browser rendering. CSS limits pixel width, not a specific number of words.

Text ellipsis is useful whenever a UI has limited space but labels may vary in length:

• File names in a file manager, such as quarterly-report-final-revised.pdf.
• Product names in fixed-width catalog cards.
• Navigation links in a narrow sidebar.
• Usernames in chat headers.
• Table cells containing IDs, URLs, or long titles.
• Buttons whose labels must stay on one line.

For important content, consider exposing the full value through a tooltip, title attribute, expandable detail view, or accessible label. Truncation improves layout, but it should not make essential information impossible to access.

In production CSS, developers often create a reusable utility class rather than repeating the same four declarations:

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

The component or layout then supplies the width constraint:

.file-name {
  display: block;
  max-width: 18rem;
}

<a class="file-name truncate" href="/files/42">
  annual-financial-summary-and-forecast.pdf
</a>

In Flexbox layouts, another common issue is that a flex item refuses to shrink enough for overflow to occur. Add min-width: 0 to the flex item that contains the truncated text:

.row {
  display: flex;
  gap: 0.5rem;
}

.row__title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

This lets the title shrink within the row instead of forcing the whole row wider.

Leaving a link as an inline element

This often fails because width does not constrain a normal inline element:

/* Problematic for a fixed-width link */
a {
  width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Fix it with display: inline-block or display: block.

a {
  display: inline-block;
  width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Forgetting overflow: hidden

text-overflow does not clip content by itself.

/* Ellipsis will not reliably appear */
.label {
  width: 140px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Add overflow: hidden.

Allowing text to wrap

Without white-space: nowrap, text can wrap to another line instead of overflowing horizontally.

.label {
  display: block;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* missing white-space: nowrap */
}

Expecting a particular word to be cut off

A width of 140px does not mean “show four words.” Fonts and text metrics determine what fits. Use a width requirement, not a word-count requirement.

Using position: relative as a fix

position: relative is not required for standard ellipsis behavior. Keep it only if you need it for positioning child elements.

Missing Flexbox shrinking behavior

If ellipsis fails inside a flex row even with the usual rules, try min-width: 0 on the flex item that contains the text.

For multi-line truncation, the single-line white-space: nowrap pattern is not enough. Multi-line clamping uses a different technique, commonly -webkit-line-clamp, and has different browser and layout considerations.

/* Standard single-line truncation */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Fixed-width anchor */
a {
  display: inline-block; /* or block */
  width: 140px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Rules to remember:

• The text must have a constrained available width.
• For a normal <a>, add display: inline-block or display: block before relying on width.
• Use white-space: nowrap for one-line ellipsis.
• Use overflow: hidden; text-overflow alone is not enough.
• text-overflow: ellipsis applies to overflowing inline content, not arbitrary overflowing elements.
• In Flexbox, min-width: 0 may be necessary on the shrinking item.
• The browser truncates by rendered width, not by character or word count.

Why is text-overflow: ellipsis not working on my anchor tag?

Anchors are inline by default, so a declared width usually does not constrain them. Set display: inline-block or display: block, then apply the truncation rules.

Do I need all three properties for a one-line ellipsis?

Usually yes: overflow: hidden, white-space: nowrap, and text-overflow: ellipsis. You also need a constrained width.

Does text-overflow: ellipsis work without a width?

It can work when another layout rule constrains available space, such as a grid column or a shrinking flex item. A fixed width or max-width is the simplest approach.

Why does the truncation point change when I change the font?

Ellipsis uses rendered pixel width. Different fonts, sizes, weights, and letter spacing change how much text fits.

Can I show an ellipsis after exactly four words?

Not with standard CSS ellipsis alone. CSS truncates based on visual space. Exact word-based truncation requires changing the text in JavaScript or preparing a shortened value.

Why does ellipsis fail inside a flex container?

A flex item may have a default minimum size based on its content. Add min-width: 0 to the item that must shrink, then apply the usual ellipsis rules.

Is position: relative required for ellipsis?

No. It does not enable truncation and can be removed unless it is needed for another positioning task.

• CSS display property — Determines whether an element behaves as inline, block, or inline-block and whether dimensions apply.
• CSS overflow — Controls what happens when content extends beyond an element’s box.
• CSS white-space — Controls wrapping and whitespace handling, including nowrap.
• CSS width and max-width — Creates the size constraint required for visible overflow.
• Flexbox sizing — Explains min-width: 0 and why flex items may not shrink.
• CSS Grid sizing — Grid columns can also constrain text and trigger ellipsis.
• Multi-line text clamping — A separate approach for limiting text to a chosen number of lines.
• Accessible labels and tooltips — Help users access text that has been visually truncated.