I'd like to use display: flex; for centering while also having a ... overflow when text overflows. It seems that as soon as I introduce the display: flex, the ellipsis stops working. Any suggestions on how to combine these two? JSFiddle: https://jsfiddle.net/silverwind/sw78h02b/1/
.target {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: red;
margin: 2rem;
display: flex; /* remove this to get ellipsis to show */
}<div class="target">
Text here is very very long that it will overflow the width of the containing element. Adding another sentence to make sure it will overflow.
</div>