Question

我的文档看起来像（简化）：

<div style=" display:flex; flex-wrap:wrap; ">
  <div>stuff</div>
  <div>
    Lots<br>
    of<br>
    vertical<br>
    content<br>
    <span>And one long sentence of text</spend>
  </div>
</div>

有时屏幕宽度足以显示所有内容而根本没有包装。如果不是，我希望包含跨度中的句子，这对总布局影响最小。相反，firefox和chrome都包裹着最外面的div。

有没有办法指定这个文本块应该首先包装？它应该用较少的宽度来做，而不是推开其他东西吗？

Answer 1

这样做，将flex: 1添加到span的父母

fiddle demo

＆＃13;

<div style=" display:flex; flex-wrap:wrap; ">
  <div>stuff stuff stuff</div>
  <div style="flex: 1">
    Lots<br>
    of<br>
    vertical<br>
    content<br>
    <span>And one long sentence of text</span>
  </div>
</div>

＆＃13;

Answer 2

似乎有用的是设置

max-width: 0px

为跨度。我希望这能使它在每个单词后总是打破，但它会做我想要的。

无论如何，在Firefox和Chrome上。我一半期望它在其他浏览器上打破。

优先考虑CSS中的包装

2 个答案: