テキストオーバーフロー：省略記号がインラインフレックスで機能しない

Question

display: inline-flexまたはdisplay: flexを使用するとtext-overflow: ellipsisが機能しないのはなぜですか？私の要件は、フレックスボックスを使用する必要があるということです。

.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

text-overflow: ellipsis匿名フレックス項目では動作しないように思われます。 spanにテキストを折り返し、そこに省略記号を適用します。

.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

このように、親divにinline-flexを設定してみてください：あなたは私、その後速かったああ

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