使用 display:flex 时文本溢出不起作用答案

【问题标题】：text-overflow is not working when using display:flex使用 display:flex 时文本溢出不起作用
【发布时间】：2019-07-29 05:02:22
【问题描述】：

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  ThisIsASampleText
</div>

Output: ThisIsASamp  
Expected: ThisIsASam...

当我删除 flex 属性时，它工作正常。

我想知道为什么 flex 会影响省略号。

TIA

【问题讨论】：

【解决方案1】：

.flex-container {
  display: flex;
  text-align: left;
}

.text-container {
   min-width: 0;
   text-overflow: ellipsis;
   overflow: hidden;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
    <div class="text-container">ThisIsASampleText</div>
</div>

【讨论】：

【解决方案2】：

你可以这样做

.flex-container {
  display: flex;
}

.flex-container p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
  ThisIsASampleText </p>
</div>

【讨论】：

【解决方案3】：

在css类中添加下面的属性

white-space: nowrap;
word-break: break-word;

【讨论】：

【解决方案4】：

在您的配置中，您有一个 匿名块容器弹性项目，其中包含您的文本（您可以参考the specificiation）。弹性项目将服从min-width 约束，因此它不会收缩但会溢出，并且由于它是一个匿名块，因此您无法对其应用min-width。

除此之外，溢出属性需要应用于弹性项目而不是弹性容器，因为它包含文本并且溢出属性不是继承的。换句话说，当使用 flexbox 时，您将有两个级别：flex 容器和 flex 项。您需要将所有内容应用到弹性项目。

假设我们在文本周围添加一个span，我们将得到这样的结果：

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

现在我们可以定位弹性项目以添加min-width:0 和所需的属性以获得预期的输出：

.flex-container {
  display: flex;
  text-align: left;
}

span {
  min-width:0;
  text-overflow: ellipsis;
  overflow: hidden;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

如果没有额外的包装器，我们就无法定位我们的弹性项目，并且将属性应用到弹性容器将无济于事。

【讨论】：

【解决方案5】：

您的问题是缺少“flex-children”。这些需要包含截断元素的样式，而不是父容器。

尝试将截断属性移动到单独的 .flex-child 类，如下所示：

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

【讨论】：