Alternative
Amazon
Article
Writing
Art
AI
Angular
Photoshop
Premiere
Animal Crossing
Blog
Story
Android
Android Studio
Davinci Resolve
CSS
Clipchamp
ChatGPT
Crypto
DALL-E
Discord
Davinci Resolve
Davinci Resolve 18
Dream Studio
Express
Filmora
Flutter
PC Games
Git
GPT
GPT3
GPT4
GTA
GTA 6
Ghost Together
Ghost Together
HTML
iOS
iMovie
Illustrator
JavaScript
Mac
Mongo
Midjourney
Minecraft
Node.js
NBA 2k24
OSX
PHP
Palworld
Python
Playground AI
Roblox
React
Recipe (Cooking)
React Native
Semicolon.dev
Starfield PC Game
Snapchat
Steam
Stable Diffusion
SVG
Threads
Text To Image (AI)
VSCode
Vim
Web Development
Windows
WebGL

Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!

best css book for beginner web developers

⭐⭐⭐⭐ and 1/2⭐ - owned by over 27.1K readers.

Get this CSS book in PDF format, on Amazon or start reading this css book on your Kindle device today!

Do This If Text-Overflow Ellipsis Is Not Working

Making text ellipsis work requires different tactic for different types of HTML elements

viewed 92.0K times
› tutorials › css › text overflow ellipsis not working

So guys! This ellipsis is not working in flex video tutorial is actually really helpful!

How to fix text overflow ellipsis not working in flex

You're here because your text-overflow ellipsis not working.

Hey guys, I'm grateful this article has reached 50K views and that it is currently #2 on Google, just below StackOverflow, I would appreciate it if you shared it!

Also check out my CSS book CSS Visual Dictionary that contains every single CSS property that can be visualized, as well as ideas on how to make CSS art. It took 3 months to gather together, and the book also has special insights for web developers.

Or you can get my PDF coding book "octopack" (8 books for the price of 1 paperback), and save hundreds of dollars on tutorial books. This isn't just text filler. High quality coding tutorials :)

To fix Text-Overflow Ellipsis not showing up, follow these steps:

  • Specify actual width of element, ellipsis doesn't work on auto-resizable elements like flex.
  • Do not specify width value in %, unless accompanied with calc(100% - 100px) function.
  • Make sure other CSS styles or parent element is not overriding your element.
  • Make sure your display is set to the value of block or inline-block.
  • Include overflow: hidden in your HTML tag.
  • Ensure to use the required white-space: nowrap property.
  • See ellipsis examples below for divs, spans, tables, grids and flex containers.

If you're looking for a Twitter alternative, please watch this video :)

If Your Text Overflow Ellipsis Not Showing Dots Here's How To Fix It

Here's ellipsis working in regular span text container and flex (more examples coming soon):

Just watch this video explaining how to fix text-overflow ellipsis not working for span. Read the rest of this tutorial if you need to fix it for other cases (flex, table, etc)

You probably simply added text-overflow property and ellipsis to your <div>.

But after applying it to your element, the dynamic-width "..." character (the 3 dots) still didn't show up.

Here is a text-overflow: ellipsis example implemented correctly in a basic span element with display: inline-block. The width of text container is animated with JavaScript to show how ellipsis works:

Long Display Name @averylongusername

This is a simple 1 line example, but there is a unique fix for different elements:

What type of HTML element is text-overflow ellipsis not working for you?

  1. Span In a span / display:inline or display:inline-block (<span> or inline paragraph)
  2. Flex It's not working in display: flex or inline-flex
  3. Table Ellipsis is not working in <table> (display table cell (<td>))
  4. Grid Ellipsis is not working in a CSS grid
  5. Select Ellipsis is not working in <select> <option> drop down menu

This tutorial will cover different cases with source code examples.

Solution for each usecase is slightly different.

Let's start with simple inline span or div:

1. Not working for <span> or <div>

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

For elements that require width to be responsive (flex or %-based item width):

  1. max-width: 0 - apply to item or cell, for flex / grid / table

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.

2. How to fix text-overflow: ellipsis not working on Flex

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.

3. How to fix text-overflow: ellipsis not working on a <table>

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;
}

4. How to fix text-overflow: ellipsis not working on a Grid

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;
}

5. How to fix text-overflow: ellipsis not working on a select / option menu

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

Coming soon...

Text Overflow & the Ellipsis Character

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:

Long Display Name @averylongusername

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%);

Be careful when using Chrome developer's console to modify values live. (You know that Chrome dev tools sidebar, that allows you to manipulate CSS properties directly.)

I've recently was able to use 80% in Chrome dev tools, but I clearly remember not being able to at some point in the past. This still doesn't mean it will work when your HTML is actually rendered in the browser directly from your source code.

Another instance of Chrome dev tools deception, for example, is we can now use 100 instead of 100px when changing values for properties such as width and height directly from the dev tools panel.

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.

If you're searching for these keywords this tutorial is for you

  1. text overflow ellipsis not showing dots
  2. text overflow ellipsis not working with flex
  3. text-overflow ellipsis not working inline-flex
  4. text-overflow ellipsis not working in table cell (td)
  5. text-overflow ellipsis not working grid
  6. text-overflow ellipsis not working without width
  7. text-overflow ellipsis not working on div
  8. text-overflow ellipsis not showing
  9. text-overflow ellipsis not tailwind
  10. text-overflow ellipsis alternative
  11. text-overflow ellipsis hover tooltip css

How to add overflow ellipsis after 2nd or 3rd line of text?

Sometimes your text breaks and wraps to next line.

In this case default overflow ellipsis doesn't make sense.

In this case you may want to display the 3 dots at the end of last line.

Here's how to display text overflow ellipsis after second line of text:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

But this will only work in webkit and Firefox.

Hopefully by the time you're reading this it has been added to Chrome too.

What are the most popular usecases for text overflow ellipsis?

Ellipsis can be used in datatables (elements created using <table> tag), usually within the <td> element.

Inside flex containers where container width is usually calculated relative to current screen size or number of other flex items in a row.

Text overflow ellipsis is an important part of UX. Among many usecases, it is often implemented to hide long usernames that don't fit contact list containers.

Another usecase is to hide long descriptions in <LI> tags, to avoid breaking single line text flow which would make your ordered (<ol>) or unordered (<ul>) list look less readable and ugly.

How to display custom text string instead of ellipsis?

You can use any string value instead of "..." character.

Here is an example of a custom text ellipsis with string: "

  • ~~":

  • text-overflow: "
  • ~~";
  • Just keep in mind browser support is horrible.

    This works "out of the box" only in Firefox but not in Chrome or Safari.

    If you absolutely must use a custom ellipsis character, you have to make your own CSS hack.

    If your text-overflow ellipsis is still not working, it might be a browser compatibility issue.

    To find this article people are searching for:

    1. text-overflow ellipsis multiline
    2. text-overflow ellipsis flex
    3. text-overflow: ellipsis 2 lines
    4. text-overflow: ellipsis without width
    5. text overflow ellipsis not working flutter
    6. text-overflow: ellipsis not working with flex

    Common questions asked about Missing Ellipsis Text Overflow

    How do I force text-overflow ellipsis?

    You can force ellipsis on an HTML element provided its display property is set to block or inline-block. You also need to set overflow: hidden on parent container. You must also add white-space: nowrap; to the parent and text-overflow: ellipsis to the element where you want the three dots to appear.

    How does text-overflow ellipsis work?

    Text-overflow ellipsis works by cutting off right side of the text that can't fit into HTML element and replacing the characters in that text, at the right border of the element, by three dots. The ellipsis character indicates that there is more text past the element's dimensions.

    How do I fix text-overflow ellipsis in CSS?

    If your text-overflow is not working you must ensure display, overflow and white-space CSS properties are set to proper values. Ellipsis works in the same way on all types of elements. But you need to use it with caution on Flex, CSS Grid or on a Table.

    The elements without display: block, might need to be handled in a special way, especially when your added HTML layout is governed by a complex set of other properties, with which ellipsis functionality might come into conflict.

    How do you text-overflow ellipsis in a table?

    To make ellipsis work in a table, one way to do it, is by setting min-width to 0 on the cell. It's a hack, but because by default table's TD container's display property is set to table-cell, you might need to first overwrite its function with other properties.

    A common way to solve ellipsis not working in a table cell is by wrapping cell's content in another HTML element like span, or div. Then applying your regular ellipsis code to those elements, same one that works in a span.

    How do I make three dots in HTML?

    The 3 dots character (also known as ellipsis) can be added to ending of a long text by setting ellipsis as a value for CSS property text-overflow on the HTML element where you want it to appear.

    How to fix text-overflow: ellipsis not working on a span element.

    How do you truncate a paragraph to 100 characters in HTML?

    If you're looking for a Twitter alternative, please watch this video :)

    Learn CSS Visually! Every single CSS property visualized in this pictorial CSS guide book!

    best css book for beginner web developers

    ⭐⭐⭐⭐ and 1/2⭐ - owned by over 27.1K readers.

    Get this CSS book in PDF format, on Amazon or start reading this css book on your Kindle device today!

    Please support my free CSS tutorials by buying my coding books!

    Hey guys, I'm grateful this article has reached 50K views and that it is currently #2 on Google, just below StackOverflow, I would appreciate it if you shared it!

    Also check out my CSS book CSS Visual Dictionary that contains every single CSS property that can be visualized, as well as ideas on how to make CSS art. It took 3 months to gather together, and the book also has special insights for web developers.

    Or you can get my PDF coding book "octopack" (8 books for the price of 1 paperback), and save hundreds of dollars on tutorial books. This isn't just text filler. High quality coding tutorials :)

    Articles Related To Css Community

    Last 10 Articles Written On Ghost Together

    Last 10 Css Questions Asked On Ghost Overflow

    Other Websites In Our Content Network

    Voxel Engine Tutorials | Jeep Windshield Decals | loom craft | etsy alternative | craigslist alternative | instagram alternative | discord alternative | reddit alternative | x alternative
    Write For Us
    Sign Up Now  -  It's Free!

    Do This If Text-Overflow Ellipsis Is Not Working

    Comments (2) New! (You can now post comments on articles!)

    (By posting a comment you are registering a Ghost Together account.)
    Register
    Register
    Post It
    DM Coming Soon
    f f