3

我有一个包含 2 列的 flexbox 容器。当没有空间显示它们时，我希望这些列堆叠。我使用以下 html/css

<div class="container">
    <div class="column">
        <div>Short content</div>
        <div>This is some longer content to show problem</div>
        <div>Short contetn</div>
    </div>
    <div class="column">
        <div>Short content</div>
        <div>This is some longer content to show problem</div>
        <div>Short contetn</div>
    </div>
</div>

和

.container {
    display: flex;
    flex-wrap: wrap;
}
.column {
    flex: 1 0 auto;
    /* grow, don't shrink */
}

JS 小提琴在这里：http: //jsfiddle.net/AsdNS/

内部 div似乎隐含white-space: nowrap着，但我不想要这个。如果我确实想要它，我肯定会在我的 CSS 中指定它。有没有办法不换行空格，然后仅在没有空格的单个文本块太大时才换行？

在实践中，我想强制它包裹一些空白，而不是其他空白（我将使用<span>s）

编辑这是一个更真实的 jsfiddle：http: //jsfiddle.net/W7g3U/1/

我想要的是长 div 换行，但短 div 不换行。

编辑 2这是我想要实现的（在 chrome 中工作）http://plnkr.co/edit/Ppoe8xJrrbC16Y1vyWCD

4

0 回答 0