Kombinieren Text-Überlauf: Ellipse mit Display: flex

Question

Ich möchte display: flex; für die Zentrierung verwenden und auch einen ... Überlauf haben, wenn Text überläuft. Es scheint, dass sobald ich das display: flex einführe, die Ellipse nicht mehr funktioniert. Irgendwelche Vorschläge, wie man diese zwei kombiniert? 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

Setzen Sie Ihren Text innerhalb span und verwenden display: flex auf Eltern und Text-Überlauf auf Spanne.

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