text-overflow: ellipsis not working with inline-flex

Question

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.

 .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> 

Answer 1

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> 

Answer 2

Try setting the inline-flex on a parent div , like this:

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

 <div class="parent-div"> <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> </div>