html - 使用display:flex时,text-overflow不起作用




css flexbox (4)

你可以做这样的事情

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

.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



在您的配置中,您有一个包含您的文本的 匿名块容器弹性项目 (您可以参考 具体 情况)。 flex项目将遵循 min-width 约束,因此它不会收缩但会溢出,因为它是一个匿名块,你无法将 min-width 应用于它。

除此之外,溢出属性需要应用于flex项而不是flex容器,因为它包含text和overflow属性不会被继承。 换句话说,使用flexbox时,您将有两个级别:flex容器和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>

现在我们可以定位flex项目以添加 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容器将不会执行任何操作。






ellipsis