将文本溢出:省略号与显示:flex 组合在一起

Question

我想使用display: flex;进行居中，同时在文本溢出时也有...溢出。似乎一旦我介绍display: flex，省略号就停止工作。关于如何将这两者结合起来的任何建议？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

将文本放在span内，并在父级上使用display: flex，在 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>