Truncated text on flex-item's child messes flex-item

Question

I have This markup

<li>
    <img>
    <div class="texts">
        <h2>Title</h2>
    </div>
</li>

and this CSS

li{
  display: flex;
  flex-wrap: wrap;
}

li img{
  align-self: center;
}

li .texts{
  flex: 1;
}

li .texts h2{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The result is gonna be an small thumbnail image and some texts beside it, i want the .texts element to fill the remaining horizental space and it does work fine, until i use white-space: nowrap on the h2 element, when i do that it breakes everything and the .texts element goes to next line.

Asons · Accepted Answer · 2017-12-02T14:32:46.167

There is 2 thing you need to do:

the flex item .texts need its min-width, which defaults to auto, set to 0, or else it won't be allowed to shrink smaller than its content, hence no ellipsis will be rendered.
~~correct an error in your CSS, where there is no space between li and .texts in the li.texts h2 rule, where it should be li .texts h2 to properly target the h2 element~~

I also removed the flex-wrap: wrap, so that doesn't create trouble in some browsers.

Stack snippet

li {
  display: flex;
}

li img{
  align-self: center;
}

li .texts{
  flex: 1;
  min-width: 0;
}

li .texts h2{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<ul>
  <li>
    <img src="http://placehold.it/150x50/f00">
    <div class="texts">
      <h2>Title, long enough to break line if parent to small</h2>
    </div>
  </li>
</ul>

Thanks, the second one was a type mistake, the `min-width: 0` worked , thanks :) — Amin, Dec 02 '17 at 14:32

Truncated text on flex-item's child messes flex-item

1 Answers1