takeradi takeradi -4 years ago 160
CSS Question

text-overflow: ellipsis not working with inline-flex



.test {
display: inline-flex;
line-height: 24px;
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: cyan;
}

<label class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore.
</label>





Why does
text-overflow: ellipsis
not work when I use
display: inline-flex
or
display: flex
? My requirement is that I have to use a flexbox.

Answer Source

It would appear that text-overflow: ellipsis doesn't work on anonymous flex items. Wrap the text in a span, and apply the ellipsis there.

.test {
  display: inline-flex;
  line-height: 24px;
  width: 200px;
  white-space: nowrap;
  background: cyan;
}

span {
  text-overflow: ellipsis;
  overflow: hidden;
}
<label class="test">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque,
            at error rerum ab facere cupiditate veniam incidunt modi temporibus
            explicabo earum minima facilis a excepturi laborum similique</span>
</label>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download