html - 文本溢出 : ellipsis not working with inline-flex

Question

为什么当我使用 display: inline-flex 或 display: flex 时，text-overflow: ellipsis 不起作用？我的要求是我必须使用 flex 盒。

.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 似乎不适用于匿名 Flex 元素。将文本包裹在 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>