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

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

TIA

Answer 1

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

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

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

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

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

Answer 4

在您的配置中，您有一个包含您的文本的匿名块容器弹性项目（您可以参考the specificiation）。弹性项目将遵守 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>

现在我们可以定位 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 容器也无济于事。

Answer 5

在 css class

下方添加属性

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

text-overflow is not working when using display:flex