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

您的问题是缺少“灵活的孩子”。这些将需要包含截断元素的样式，而不是父容器。

尝试将截断属性移动到单独的.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

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

https://brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow/

Answer 4

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

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

现在，我们可以定位弹性项目以添加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类中添加以下属性

Set

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

5 个答案: