テキストオーバーフロー：表示付き省略記号：フレックス

Question

display: flex;をセンタリングに使用すると同時に、テキストオーバーフロー時にオーバーフローする...があります。私がdisplay: flexを紹介するとすぐに、省略記号が機能しなくなるようです。これらの2つを組み合わせる方法に関する提案はありますか？ 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>