在 CSS 中优先考虑包装答案

【问题标题】：Prioritize Wrapping in CSS在 CSS 中优先考虑包装
【发布时间】：2016-06-16 17:16:18
【问题描述】：

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

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

有时屏幕足够宽，可以完全显示所有内容而无需换行。如果不是，我希望将 span 中的句子包裹起来，这对整体布局的影响最小。相反，Firefox 和 chrome 都在包裹最外层的 div。

有没有办法指定这个文本块应该是第一个换行的东西？它应该用更小的宽度而不是把其他东西推开？

【问题讨论】：

标签： css word-wrap

【解决方案1】：

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

fiddle demo

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

【讨论】：

这适用于我发布的简化版本，但不是真实的。我猜这与 dom 元素的额外嵌套有关。
@dspeyer 如果你发布的是真实的东西，我也许也能解决这个问题，适用于所有浏览器

【解决方案2】：

似乎有效的是设置

max-width: 0px

对于跨度。我希望这让它总是在每个单词之后中断，但它会做我想要的。

无论如何，在 Firefox 和 Chrome 上。我有一半预计它会在其他浏览器上中断。

【讨论】：