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>

display:flex; doesn't mix with ellipsis, it is supposed to hold tags not plain text. Might be the reason why ellipsis is not triggered. flex is also a grid system :( — G-Cyrillus, Jul 15 '18 at 18:53
Wrap content inside flex item with an element (`` probably works best for this[.](https://semicolon.dev/tutorial/css/text-overflow-ellipsis-doesnt-work)) Set the item itself to, `min-width: 0;` (And, also, follow all other rules that make ellipsis work in a regular div.) — InfiniteStack, Aug 17 '22 at 15:07

Michael Benjamin · Accepted Answer · 2018-07-15T21:14:27.283

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 (i.e., 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:

score 3 · Answer 2 · answered Jul 15 '18 at 18:53

3

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/

answered Jul 15 '18 at 18:53

pretzelhammer

13,874
15
47
98

CSS text-overflow ellipsis not working in Grid / Flex

2 Answers2

Linked