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

Question

我有一个 div，它是一个包装器，里面有一些 child div。我正在使用 flexbox 将它们放在彼此下方。现在，child div 有一个文本。文本与 align-items: center; 垂直对齐。 child div 的宽度取决于它的文本。当文本与包装纸一样长时，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

无需在 .wrapper__item class 中使用 display:flex，因为 text-overflow 在 flex 行中不起作用。

而对于 height，您可以使用 line-height，因为您的文本在一行中....或者您可以同时使用 height 和 line-height

堆栈片段

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;
}

<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

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

主要原因是文本节点变成了一个匿名的 flex 子节点，需要 min-width: 0 才能正常运行（否则它不会缩小到超出其内容大小），但由于无法定位文本带有 CSS 的节点，我们需要包装它，这里用 span.

完成

这里有一个 post 对

有很好的解释

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

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

Use text-overflow: ellipsis and flexbox align-items: center in combination

html

css

flexbox

ellipsis