CSS text-overflow ellipsis not working in Grid / Flex

Question

I am not able to get text-overflow ellipsis to work in a CSS grid. The text is truncated but the ellipsis dots don't show up. Here is my CSS:

 .grid { display: grid; margin: auto; width: 90%; grid-template-columns: 2fr 15fr } .gridItem { border: 1px solid red; display: flex; height: calc(50px + 2vw); align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

 <div class="grid"> <div class="gridItem">Why no ellipsis on this div?</div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> </div>

Answer 1

To make the ellipsis work you need to target the text not the container .

In your code, you are setting the ellipsis on the flex container (a grid item):

.gridItem {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(50px + 2vw);
    border:1px solid red;
}

The child of the container is the text. Except you can't apply any CSS directly to the text because it's an anonymous flex item (ie, a flex item with no defined tags around it). So you need to wrap the text into an element and then apply the ellipsis code.

From this:

<div class="gridItem">Why no ellipsis on this div?</div>

To this:

<div class="gridItem"><span>Why no ellipsis on this div?</span></div>

Then you have to contend with the minimum sizing algorithm of flex items. This rule, set by default, states that a flex item cannot be smaller than its content along the main axis. The solution to this problem is to set the flex item to min-width: 0 , which overrides the default min-width: auto .

 .grid { display: grid; margin: auto; width: 90%; grid-template-columns: 2fr 15fr; } .gridItem { display: flex; align-items: center; height: calc(50px + 2vw); border: 1px solid red; min-width: 0; } .gridItem > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

 <div class="grid"> <div class="gridItem"><span>Why no ellipsis on this div?</span></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> <div class="gridItem"></div> </div>

revised codepen

These posts provide more detailed explanations:

• understanding the flex minimum sizing algorithm
• understand anonymous flex items

Answer 2

The issue seems to be that .gridItem has display: flex; styling on it, if you take that off it works. If you need to have display: flex; on your grid items then this article may be helpful: https://css-tricks.com/flexbox-truncated-text/