我的代码很简单：
div {
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#flex {
display: flex;
}<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>为什么flexbox不允许我使用我text-overflow:ellipsis，我该怎么做才能使其正常工作？
您不能将溢出的东西放在弹性框容器上，需要将其放在子元素上。
.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句