html - 使用文本溢出 : ellipsis and flexbox align-items: center in combination

Question

我有一个 div，它是一个包装器，里面有一些子 div。我正在使用 flexbox 将它们放置在彼此下方。现在，子 div 有一个文本。文本通过 align-items: center; 垂直对齐。子 div 的宽度取决于它的文本。当文本与 wrapper 一样长时，div 应该停止增长并且其中的文本应该被剪掉。为此，我尝试使用 text-overflow: ellipsis;。它没有按预期工作。我知道我可以在 flexbox 的情况下使用 display: inline-block;，但我想使用 flexbox 来组合对齐文本使用 text-overflow: ellipsis; 但它似乎不适用于我的示例。目前，带有长文本的元素与包装重叠，也没有省略号。该元素具有固定高度。

我为这个主题找到的唯一答案是这个，但答案对我没有帮助:Ellipsis in flexbox container

希望它足够清楚。

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
  flex-wrap: wrap;
}

.wrapper__item {
  min-width: 0;
  flex-basis: 50%;
  align-self: flex-start;
  flex-direction: row;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: white;
  height: 50px;
}

<div class="wrapper">
  <div class="wrapper__item">Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
    tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
    erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</div>

  <div class="wrapper__item">Proin eget tortor ri.</div>

  <div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>

Answer 1

text-overflow: ellipsis 不适用于 flex 容器(display: flex)。

主要原因是文本节点变成了一个匿名的 flex 子节点并且需要 min-width: 0 来表现(否则它不会缩小到超出它的内容大小)，但是正如一个可以'使用 CSS 定位文本节点，我们需要包装它，这里使用 span 完成。

这是一篇对 The Automatic Minimum Size of Flex Items 有很好解释的帖子

---

注意 1:父溢出是由 width + padding 引起的，box-sizing: border-box 将解决这个问题。

注意 2:要让 align-items: center 生效，item 需要一个高度，这里给定 50px。

堆栈片段

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
}

.wrapper__item {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: white;
  height: 50px;
}
.wrapper__item span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="wrapper">
  <div class="wrapper__item"><span>Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
    tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
    erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</span></div>

  <div class="wrapper__item">Proin eget tortor ri.</div>

  <div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>