DEV Community

loading...
Cover image for text-overflow p in flex

text-overflow p in flex

dvnrsn profile image Devin Rasmussen ・2 min read

I realize this topic has been visited elsewhere but I ran into this for the thousandth time and decided to make a post of it in the hope of locking it in memory (if not personal reference).

The situation is a dropdown list item that is wrapping the words from one line to another, making the UI less than balanced.

alt text

codepen

<div class='parent'>
  <input type='radio' />
  <div class='flex'>
    <p>first line</p>
    <div>🥱</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

No problem. Let's just add the recommended ellipsizing css to the p tag

p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

alt text

Oh shoot, what have I done? Perhaps the div that surrounds the text and emoji needs a width 100%.

alt text

Ok, but what happened to the 24px of padding. Why is that not respected?

The flex div stays within the padding but its textual children do not.

If you inspect the computed browser styling of the flex child you'll notice something interesting:

alt text

If you follow the rabbit hole of the w3 spec for automatic minimum size of flex items you'll observe that the default min-width: auto ends up being either the specified or the content size suggestion. This, as I understand (and please enlighten me if you understand further) amounts essentially to the minimum width of the children text nodes.

In order to overcome this large minimum width we simply add in a min-width: 0 to the flex div (Note: this permits us to remove width: 100%;).

alt text

.flex {
  display: flex;
  align-items: center;
  min-width: 0;
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide