Question

我的代码非常简单：

＆＃13;

div {
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#flex {
  display: flex;
}

＆＃13;

<div id="not-flex">
  <span>I am text. I should overflow. When I overflow, I should have an ellipsis at the end.</span>
</div>

<div id="flex">
  <span>I am text. I should overflow. When I overflow, I should have an ellipsis at the end.</span>
</div>

＆＃13;

为什么flexbox不允许我text-overflow:ellipsis，我该怎么做才能让它工作？

Answer 1

根据W3C规范，这是预期的行为despite huge number discussions about：

文字溢出（spec）

此属性指定内联内容溢出时的呈现 阻止容器元素（＆＃34;块＆＃34;）在其内联进程中除'可见'以外的'溢出'的方向。

Flex（spec）

Flex容器不阻止容器

Answer 2

你不能把溢出的东西放在flex盒容器上，你需要把它放在子元素上。

.box {
  display: flex;
  width: 300px;
}
.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="box">
    <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita magnam dolore, ipsam architecto, amet iusto. Doloremque minima inventore eius reiciendis corporis officiis impedit iure vitae voluptates, iste nesciunt, labore natus!</span>
</div>

Flexbox和文本溢出：省略号不混合？

2 个答案:

文字溢出（spec）

Flex（spec）