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>