Today I Learned

Enable ellipsis only on the larger sibling

We have an element that has a max-width, and contains 2 child elements with text. If the text gets too long, we use ellipsis on them. But there are a few cases to cover:

  • if one of the elements is smaller than 50%, we only truncate the bigger one (it can be either of these elements),
  • we truncate both equally if they exceed 50%,
  • and of course no truncation if both are smaller.

At first I thought it’s impossible with CSS, as in flex the truncation occurred on both elements and table had problems with width, but grid worked just fine, as you can see in the codepen here.