带有CSS3的智能列

Question

I have some text in a <pre> that is almost doing what I want with column-count and media queries.

http://jsfiddle.net/tbhtrL0f/11/ (change the size of the result pane to see 1/2/3 columns)

There are a couple of things I would like to change about this but don't know how:

1. Instead of doing the number of columns based on a media query, I would rather add a new column when there is sufficient horizontal space to do so (without overflow).
2. I would like to preferentially break where there are two returns in a row.

Are either/both of these changes possible with pure CSS?

Answer 1

Your first question is doable, but the second would require some markup.

1. You can set the column width instead: column-width: 20em (or which ever width that suits your design). Doing so means that the column will be at least that wide (unless the containing block is even narrower), and new columns will be added as needed as long as they fit at that minimum measure. So no media queries needed. You could also combine column-width and column-count , which means that the column count is the maximum number of allowed columns. Finally, there's the columns shorthand, that allows you to set both at the same time: columns: 20em 4;

2. There's the break-before / break-after and break-inside properties, and they can be applied to elements within a column layout, but not to whitespace. I'd use JS to detect some certain kind of whitespace and inject something to break on. Also, if I remember correctly, the column break properties aren't that widely supported, but I can't find a link on that right now..