CSS3的智能列

Question

我在<pre>中有一些文字几乎可以通过column-count和媒体查询进行操作。

http://jsfiddle.net/tbhtrL0f/11/（更改结果窗格的大小以查看1/2/3列）

我想改变一些事情，但不知道如何：

1. 我没有根据媒体查询进行列数，而是在有足够的水平空间时添加新列（没有溢出）。
2. 我想优先打破连续两次返回的地方。

使用纯CSS可以实现这两种变化吗？

Answer 1

你的第一个问题是可行的，但第二个问题需要一些标记。

1. 您可以改为设置列宽：column-width: 20em（或适合您设计的宽度）。这样做意味着列将至少是那么宽（除非包含块更窄），并且只要它们适合该最小度量，就会根据需要添加新列。所以不需要媒体查询。您还可以合并column-width和column-count，这意味着列数是允许列的最大数量。最后，还有columns简写，允许您同时设置两者：columns: 20em 4;

2. 有break-before / break-after和break-inside属性，它们可以应用于列布局中的元素，但不是空白。我使用JS来检测某种特定的空白并注入一些东西来打破。另外，如果我没记错的话，列分隔属性并没有被广泛支持，但我现在无法找到链接。