text-overflow：省略號不能用inline-flex

Question

爲什麼text-overflow: ellipsis在我用display: inline-flex或display: flex時不工作？我的要求是我必須使用flexbox。

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