使用display：flex时文本溢出不起作用

Question

.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属性时，它工作正常。

我想知道为什么柔韧性会影响省略号。

TIA

Answer 1

你的问题是缺乏“弹性儿童”。这些需要包含样式来截断元素，而不是父容器。

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

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

来源及详细解释：https : //css-tricks.com/flexbox-truncated-text/

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

Answer 3

在您的配置中，您有一个包含文本的匿名块容器弹性项目（您可以参考相关规范）。弹性项目将遵守约束min-width，因此它不会缩小但会溢出，并且由于它是一个匿名块，因此您无法应用min-width它。

除此之外，溢出属性需要应用于 Flex 项目而不是 Flex 容器，因为该容器包含文本并且溢出属性不会被继承。换句话说，当使用 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>

如果没有额外的包装器，我们就无法定位 Flex 项目，并且将属性应用到 Flex 容器将不会执行任何操作。