组合使用文本溢出：省略号和flexbox对齐项目：居中

Question

我有一个div，它是一个包装器，里面有一些子div。我使用flexbox将它们放置在彼此下方。现在，子div有一个文本。文本垂直对齐amize-Item： center；。子div的宽度取决于它的文本。当文本和包装器一样长时，div应该停止生长，其中的文本应该被剪掉。为此，我尝试使用text-overflow： ellipsis；。它没有像预期的那样工作。我知道我可以使用show： inline-block；在flexbox的情况下，但我想使用flexbox将文本与text-overflow： ellipsis；组合对齐，但似乎不是用我的例子工作。目前，长文本的项目与包装重叠，也没有省略号。该项目具有固定高度。

对于这个主题，我找到的唯一答案是这个，但是答案对我没有帮助：flexbox容器中的省略号

希望够清楚。

.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

无需在中使用显示：flex。包装项类为文本溢出在flex行中不起作用。

对于高度，您可以使用行高度，因为您的文本在一行中。。。。或者您可以同时使用高度和行高度

堆栈片段

body {
  margin: 0;
}

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

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

html lang-html prettyprint-override"><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 2

文本溢出：省略号在flex容器上不起作用（显示：flex）。

主要原因是文本节点变成了一个匿名flex子节点，需要min-width:0才能正常工作（否则它不会缩小到超过其内容大小），但由于不能使用CSS将文本节点作为目标，我们需要将其包装，这里使用span完成。

这里有一篇文章对弹性物品的自动最小尺寸做了很好的解释

注意1：父项溢出是由宽度填充引起的，而框大小：border box将修复此问题。

注2：为了使对齐项目：居中产生效果，项目需要一个高度，此处给出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>