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

尝试在父inline-flex上设置div，如下所示：

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

text-overflow：省略号不能与inline-flex一起使用

2 个答案: