使用 text-overflow: ellipsis 和 flexbox align-items: center 组合

Question

我有一个div，它是一个包装器，里面有一些孩子div。我正在使用flexbox将它们放置在彼此下方。现在，子 div 有一个文本。文本与 垂直对齐align-items: center;。子 div 的宽度取决于它的文本。当文本与包装器一样长时，div 应该停止增长并且里面的文本应该被剪掉。为此，我尝试使用text-overflow: ellipsis;. 它没有按预期工作。我知道我可以display: inline-block;在 的情况下使用flexbox，但我想使用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.

这是一篇对 Flex 项目的自动最小尺寸有很好解释的帖子

注意 1：父溢出是由宽度 + 填充引起的，box-sizing: border-box并将修复它。

注2：align-items: center要产生效果，项目需要一个高度，这里给出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>