結合文本溢出：省略號與顯示：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>