Template:Column-width

Template documentation[view] [edit] [history] [purge]

Usage

This template generates the equivalent of CSS3 style property column-count

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

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.

The above documentation is transcluded from Template:Column-width/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.