Textüberlauf: Ellipse funktioniert nicht mit Inline-Flex

Question

Warum funktioniert text-overflow: ellipsis nicht, wenn ich display: inline-flex oder display: flex verwende? Meine Voraussetzung ist, dass ich eine Flexbox verwenden muss.

.test { 
 
    display: inline-flex; 
 
    line-height: 24px; 
 
    width: 200px; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    background: cyan; 
 
}

<label class="test"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore. 
 
    </label>

Answer 1

Es scheint, dass text-overflow: ellipsis nicht auf anonyme flex Artikel nicht funktioniert. Wickeln Sie den Text in eine span und wenden Sie die Ellipsen dort an.

.test { 
 
    display: inline-flex; 
 
    line-height: 24px; 
 
    width: 200px; 
 
    white-space: nowrap; 
 
    background: cyan; 
 
} 
 

 
span { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<label class="test"> 
 
     <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, 
 
      at error rerum ab facere cupiditate veniam incidunt modi temporibus 
 
      explicabo earum minima facilis a excepturi laborum similique</span> 
 
</label>

Answer 2

Versuchen Sie, die inline-flex auf einer übergeordneten div, wie diese Einstellung:

.test { 
 
    line-height: 24px; 
 
    width: 200px; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    background: cyan; 
 
} 
 

 
.parent-div { 
 
    display: inline-flex; 
 
}

<div class="parent-div"> 
 
    <label class="test"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, itaque, at error rerum ab facere cupiditate veniam incidunt modi temporibus explicabo earum molestiae minima facilis a excepturi laborum similique dolore. 
 
    </label> 
 
</div>