Combining text-overflow:ellipsis with display:flex

Question

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>

Answer 1

Put your text inside span and use display: flex on parent and text-overflow on span.

.target {
  background: red;
  margin: 2rem;
  display: flex; 
}
span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="target">
  <span>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.</span>
</div>