结合文本溢出：省略号与显示：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。

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