Css text-overflow: ellipsis not working

When the text is too long for the available width we can use text-overflow: ellipsis The standard use is to add to your component:

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

Although there is number of cases when any of the item parents style affect the overflow of the item. Lets check some of those cases:

1. Flex Direct parent and one of direct parents is grid

In case ellipsis not working , like in this example:

<div style="display: grid;">
  <div style="display: flex;flex-direction: column;">
    <div style="display: flex;flex-direction: column;">
      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">This is a long .</div>
      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">This is another long line of text that will truncate with an ellipsis.</div>
      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">This is a long .</div>
    </div>
  </div>
</div>

In this case it is not working because of the layout issue, parent grid doesn't give all the width to it's son. To fix this we need to add min-width: 100%; on the grid child.

<div style="display: grid;">
  <div style="display: flex;flex-direction: column;min-width: 100%;">
    <div style="display: flex;flex-direction: column;">
      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">This is a long .</div>
      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">This is another long line of text that will truncate with an ellipsis.</div>
      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">This is a long .</div>
    </div>
  </div>
</div>

And it will work.

In general if you have this type of bug you need to go from your component up in the tree and check that you don't have this issue. In this case you need to find first grid parent and put on its related child min-width: 100%;

2. Make sure you have correct display property on the ellipsis item

Ellipsis does't work for most of the display values, so make sure you have correct display value:

.item {
  display: block;
}

Hope this helps.