Do This If Text-Overflow Ellipsis Is Not Working

Example of a working text-overflow ellipsis

This is the easiest example but similar rules apply to flex, grid and table td cells too.

So how do we make ellipsis character appear in a span (inline or inline-block) in a regular paragraph?

Here's CSS source code for the parent element:

.parent {
    position: relative;
    width: 150px;
    height: 32px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid gray;
}

(Highlighted parts is what you're probably missing.)

There is a number of things that can go wrong.

Below is a list of possible fixes, but the solutions are pretty simple.

How to fix missing ellipsis in <span> (display: inline or display: inline-block)

So what is the reason text-overflow: ellipsis might still not be working?

The text-overflow property alone doesn't add ellipsis or force an overflow to occur.

Here's the checklist:

First 5 items are required to make ellipsis work in any HTML element:

1. overflow: hidden;
2. white-space: nowrap;
3. text-overflow: ellipsis;
4. display: block; or...
5. display: inline-block;
6. Use px, don't use % (percentage values might be causing the problem)
7. But...if you must use percent use calc(80%) (CSS's built-in calc function)
8. Try replacing display: inline with display: inline-block

In your code here is minimum CSS required to make ellipsis appear:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block; /⋆ or display: inline-block ⋆/
width: 250px; /⋆ important, don't use % percent ⋆/
width: calc(80%); /⋆ this might work, tho ⋆/

Remember how responsive elements have parent container and items?

So you need to be mindful of what you set to parent and what you set to items/cells.

For text ellipsis to work in responsive elements, set the item to:

max-width: 0;
width: 50%; /⋆ must specify in percent (%) ⋆/

And set your parent to width: 100%; or make sure it's responsive by default (like table or flex.)

Next, we'll explore how to make ellipsis work in a flexbox container.

According to Flex's minimum sizing algorithm flex item cannot be smaller than the size of its content along the main axis. Apply the following CSS style to your flex parent and items to make ellipsis work:

div.parent { width: 500px; }

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  min-width: 0;
  flex-basis: 50%;
}

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

And your HTML:

<div class="container">
  <div class="row">
    <div class="column">
      <p>Harry, who was starting to feel warm and sleepy, looked up at the High Table again. Hagrid was drinking deeply from his goblet. Professor McGonagall was talking to Professor Dumbledore. Professor Quirrell, in his absurd turban, was talking to a teacher with greasy black hair, a hooked nose, and sallow skin.</p>
    </div>
    <div class="column">
      <p>It was a tiny, grubby-looking pub. If Ha grid hadn’t pointed it out, Harry wouldn’t have noticed it was there. The people hurrying by didn’t glance at it. Their eyes slid from the big book shop on one side to the record shop on the other as if they couldn’t see the Leaky Cauldron at all. In fact, Harry had the most peculiar feeling that only he and Ha grid could see it. Before he could mention this, Ha grid had steered him inside. </p>
    </div>
  </div>
</div>

Flex is designed for automatic stretching, so it makes a lot of decisions for you, especially when other flex properties are modifying position and size of your items.

Follow insights on this page but also try removing any flex properties you already added to your container or items that may be interfering with ellipsis.

There are 3 ways to make ellipsis work in a table.

Ellipsis in a table that needs responsive column width (specified in %) does not work in the same way as a table that requires column width to be static (specified in pixels.)

Regardless of your case, you can make ellipsis work in a table following these examples.

Table Solution 1: Change <td> style from table-cell to inline block

On a table's <td> tag, display property is set to table-cell by default.

To make ellipsis work on a table cell (<td>) set display of the cell to block or inline-block;

td {
  display: inline-block
  width: 150px; /★ assumes static width ★/
}

This works only with pixel values as it breaks responsiveness of table functionality.

If your table column width is static and does not change (specified in pixels) this should work fine.

Setting max-width to a pixel value tends to fix ellipsis in table cells.

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

But that doesn't work on a responsive table.

How to make ellipsis and preserve responsiveness of a table?

If your table column widths must be responsive and are specified in percent, your table width must be specified in percent and your TD must have a max-width property and it should be specified in percent.

table {
  width: 100%:
}

And then:

td {
  max-width: 50%;
  display: inline-block; /★ you need this ★/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

To make ellipsis work in a responsive table you must also use display: inline-block:

Table Solution 2: on the TABLE element itself

Apply fixed value to your table tag on table-layout property:

table {
  table-layout: fixed;
  width: 60px;
}

Of course the minimum rules for displaying ellipsis still apply to TD cells.

Table Solution 3: Wrap content in a span inside the TD cell

Another solution is to add span inside your table cell.

But also set position to absolute, and top / right properties to 0;

td span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

One solution for making text-overflow ellipsis work in a grid is to convert the cell to flex.

And then follow the same rules from previous section.

Apply the following style to your grid item where you want ellipsis to work:

#grid .item {
  display: flex;
  align-items: center;
  height: calc(50px + 2vw);
  border: 1px solid red;
  min-width: 0;
}

Then wrap your grid cell's content with a span tag and set the minimum required properties for ellipsis to work, as you would in any regular inline element:

#grid .item > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

How to make ellipsis work in a select / option dropdown menu.

Coming soon...

The text-ovferflow property only affects content that overflows a block container element in direction of its inline progression which is usually right to left (text doesn't overflow the bottom of the box on line breaks.)

The ellipsis value will render ellipsis ('…' which in unicode is U+2026 or &­#8230; in HTML, generally known as "Horizontal Ellipsis" in punctuation) to represent clipped text.

The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If the text appears longer than the width of its parent container it will clip.

If there is not enough space to display the ellipsis, it is clipped.

text-overflow: ellipsis only works when the following is true:

• Parent element is not set to display: inline (span's default,)
• You must use display: block or display: inline-block.
• The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)


• The element must have following properties set: overflow: hidden and white-space: nowrap

Classic problem occurs when the width of your element isn't constrained. You have a width set, but because the element's display property is also set to inline (often the default for spans,) overflow is ignored and because nothing else is constraining container's width text content keeps on expanding together with the parent without triggering overflow.

You can fix this by doing one of the following:

• Set the element to display: inline-block or display: block (probably the former, but depends on your layout needs).


• Set one of its container elements to display: block and give that element a fixed width or max-width.

I'd suggest display: inline-block since this will have the minimum collateral impact on your layout; it works very much like display: inline as far as the layout is concerned, but feel free to experiment with the other points as well.

Here's a snippet with your code, with a display: inline-block added, to show how close you were.

.parent {
    height: 32px;
    width: 289px;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid gray;
}

Here's the class applied to parent container:

<div class="parent">
  <b>Long Display Name<b> @averylongusername
</div>

Here's the result:

You can still use % width and attain text-overflow: ellipsis, but you will have to use it together with the CSS's built-in calc function:

display: inline-block;
text-overflow: ellipsis;
width: calc(80%);

Whenever you use calc, the final value is rendered in absolute pixels, which consequentially converts 80% to something like 800px for a 1000px-width container.