Template:Column-width
Usage
This template generates the equivalent of CSS3 style property column-count [1]
On Webkit browsers (Safari, Chrome, Chromium), it uses the experimental property -webkit-column-count.
On Mozilla browsers (Firefox), it uses the experimental property -moz-column-count.
Use it in CSS style properties to set the minimum width of columns to render the contents of a multi-column element.
Useful for presenting long narrow lists of terms (a width of 18em generally fits well). Extra columns will be created as needed to better fit wide screens without having to scroll vertically to read it completely.
Also useful to limit the width of lines in paragraphs, because too large column are more difficult to read (a column width of about 36em generally fits well). Note that depending on the effective number of columns that can fit in the available display width, effective column width will frequently be larger (up to the double of the spedified width if only a single column can fit). The rendered column width may be also narrower than the specified width in order to fit at least one column.
When using this property to render unindented paragraphs of text, you should use also define a {{column-gap}}.
Example
{{column-width|18em}}gives:-moz-column-width:18em;-webkit-column-width:18em;column-width:18em;
References
- ^ CSS Multi-column Layout Module, W3C specification.
See also
- {{break-before}}, {{break-inside}}, {{break-after}} — style properties for child elements.
- {{column-count}}, {{column-gap}}, {{column-rule}} — style properties for parent multi-column elements.
