Wikipedia:Line break handling
From Wikipedia, the free encyclopedia
 |
This page is a how-to guide detailing a practice or process on the English Wikipedia. |
This page explains different methods for creating, controlling and preventing line breaks and word wraps in Wikipedia articles and pages.
When a paragraph or line of text is too long to fit on one line, web browsers, like many other programs, automatically wrap the text to the next line. Web browsers usually insert the word wraps where there are spaces in the text.
Contents |
[edit] Causing line breaks
- See also: Wikipedia:Don't use line breaks.
There are several ways to force line breaks and paragraph breaks in the text. The simplest method is by inserting newlines. Here is a code example:
A single newline in the code does not cause a visible line break. But the paragraph is word wrapped where necessary. But an empty line in the code causes a paragraph break. And two empty lines in the code cause an extra wide paragraph break. And this line of text <br> will break in the middle.
It renders like this:
A single newline in the code does not cause a visible line break. But the paragraph is word wrapped where necessary. But an empty line in the code causes a paragraph break.
And two empty lines in the code cause an extra wide paragraph break.
And this line of text
will break in the middle.
The <br> tag is used for a single forced line break. This can for instance be useful in a parameter of an infobox template, since tighter line spacing than paragraph breaks are often preferred inside boxes. The <br> tag used here is not really HTML markup but "HTML wikimarkup" that gets interpreted by MediaWiki.
[edit] Preventing and controlling word wraps
 |
This section in a nutshell: To prevent word wraps use , for more complex cases use {{nowrap}} or {{nowraplinks}}+{{nowraplinks end}} or even {{nowrap begin}}+{{wrap}}+{{nowrap end}}. |
There are several ways to prevent word wraps (line wraps) from occurring in unwanted places. This is an overview of when to use which method.
These examples use the templates {{·}}, {{nowrap}}, {{nowraplinks}}, {{nowrap begin}} and their helper templates. To learn more about those templates click on their names to see their documentation pages.
[edit]
The HTML entity is a non-breaking, or hard, space. It renders like a normal space " ", but prevents a line wrap from occurring, like this:
Lots of text 10 kg more text.
It may render like this:
- Lots of text
- 10 kg more text.
But it will not render like this:
- Lots of text 10
- kg more text.
[edit] {{nowrap}}
The {{nowrap}} template prevents line wraps in text and links containing spaces. Consider a more complex case like "10 kg (22 lb)". It can be coded like this:
Lots of text 10 kg (22 lb) more text.
But that is slightly awkward. So in such cases it is instead recommended to use the {{nowrap}} template. Like this:
Lots of text {{nowrap|10 kg (22 lb)}} more text.
It may render like this:
- Lots of text 10 kg (22 lb)
- more text.
Or like this:
- Lots of text
- 10 kg (22 lb) more text.
But it will not render like this:
- Lots of text 10 kg (22
- lb) more text.
In some cases {{nowrap}} doesn't work so well. For instance, when you want to prevent wraps in longer or more complex text, then it might be hard to see where the {{nowrap}} ends. And the MediaWiki template mechanisms interpret characters like equal signs "=" and pipes "|" in template parameters as special characters, and thus they cause problems. In these cases, it is instead recommended to use {{nowrap begin}} + {{nowrap end}}, like this:
{{nowrap begin}}2 + 2 = 4{{nowrap end}} and
{{nowrap begin}}|2| < 3{{nowrap end}}
It may render like this:
- 2 + 2 = 4 and
- |2| < 3
But it will not render like this:
- 2 + 2 = 4 and |2|
- < 3
Read more about {{nowrap begin}} + {{nowrap end}} in their own section below.
[edit] {{nowraplinks}} + {{nowraplinks end}}
In lists of links such as inside infoboxes and navboxes, using a lot of or {{nowrap}} can be messy.
Most link lists use a dot as a separator. They usually use the template {{·}}, which contains a before the dot, thus handling some of the wrapping problems. But consider this case:
[[Salt and Pepper]]{{·}} [[Curry and Saffron]]
We want it to only line wrap after the dot, but unfortunately it might also line wrap at the spaces inside the links. So it might render like this:
Therefore we have {{nowraplinks}} + {{nowraplinks end}}. Nowraplinks prevents line wraps inside links (links containing spaces) and only allows line wraps between the links and in normal text. Like this:
{{nowraplinks}}
[[Salt and Pepper]]{{·}} [[Curry and Saffron]]
{{nowraplinks end}}
It may render like this:
But it will not render like this:
The nowraplinks functionality is also available via the nowraplinks class. The standard navboxes automatically use the nowraplinks class, so there is no need to use {{nowraplinks}} + {{nowraplinks end}} inside them.
For most link lists the nowraplinks template or class is easy to use and works well. However, there are some exceptions. The next section explains all about that.
[edit] Nowraplinks shortcomings
Below is an example that will cause (differing) problems in all web browsers. The example uses the nowraplinks class, which is equivalent to using {{nowraplinks}} + {{nowraplinks end}} in each table cell. Note that the code in the two table cells differs slightly. Try dragging the width of your web browser window so it becomes smaller and smaller and watch how the line wrapping misbehaves:
{| class="wikitable nowraplinks"
|
[[Apollo 11]] (1969){{·}} [[Apollo 12]] (1969){{·}}
[[Apollo 14]] (1971){{·}} [[Apollo 15]] (1971){{·}}
[[Apollo 16]] (1972){{·}} [[Apollo 17]] (1972)
|
[[Apollo 11]](1969){{·}} [[Apollo 12]](1969){{·}}
[[Apollo 14]](1971){{·}} [[Apollo 15]](1971){{·}}
[[Apollo 16]](1972){{·}} [[Apollo 17]](1972)
|}
It renders this:
|
Apollo 11 (1969) · Apollo 12 (1969) · Apollo 14 (1971) · Apollo 15 (1971) · Apollo 16 (1972) · Apollo 17 (1972) |
Apollo 11(1969) · Apollo 12(1969) · Apollo 14(1971) · Apollo 15(1971) · Apollo 16(1972) · Apollo 17(1972) |
The left table cell:
- Wrapping will often happen between the links and the years. This happens in all web browsers and is correct behaviour according to web standards. This is because there is a space outside the link and thus not protected by the nowraplinks class. But usually we only want wraps to occur immediately after the dots in link lists.
The right table cell:
- If using Firefox and the nowraplinks template or class and putting linked and non-linked text together without spaces between them, then the content expands outside the cell. This is a browser bug. The content also expands somewhat when just using linked text and dots, but usually not enough to be worth fixing.
- Some web browsers (like some versions of Internet Explorer) sometimes also do word wraps at special characters like quotation marks
" ", parentheses( ), hyphens and dashes-, slashes/ \, the degree symbol°, and right before and after<span> </span>tags. According to some sources, this is allowed by web standards and thus not a browser bug. But we usually don't want that.
The best solution is to use {{nowrap begin}} + {{wrap}} + {{nowrap end}} on the lists that would otherwise fail. Fortunately, this solution seems to work very well in all web browsers. You can read more about it in the next section.
[edit] {{nowrap begin}} + {{·w}} + {{nowrap end}}
{{nowrap begin}} + {{nowrap end}} prevents line wraps in text and links containing spaces. To tell exactly where wraps may occur use the helper template {{wrap}}. For convenience there are some additional helper templates like the {{·w}} (a shortcut to {{·wrap}}), which is equivalent to writing {{·}}{{wrap}}.
Note! The helper templates may only be used in sections surrounded by {{nowrap begin}} and {{nowrap end}} or they may cause weird behaviour on your page.
Below is the same example that caused problems with nowraplinks, but now using {{nowrap begin}} + {{·w}} + {{nowrap end}}. Try dragging the width of your web browser window so it becomes smaller and smaller and see how the line wrapping now only occurs right after the dots:
{| class="wikitable"
|
{{nowrap begin}}
[[Apollo 11]] (1969){{·w}} [[Apollo 12]] (1969){{·w}}
[[Apollo 14]] (1971){{·w}} [[Apollo 15]] (1971){{·w}}
[[Apollo 16]] (1972){{·w}} [[Apollo 17]] (1972)
{{nowrap end}}
|
{{nowrap begin}}
[[Apollo 11]](1969){{·w}} [[Apollo 12]](1969){{·w}}
[[Apollo 14]](1971){{·w}} [[Apollo 15]](1971){{·w}}
[[Apollo 16]](1972){{·w}} [[Apollo 17]](1972)
{{nowrap end}}
|}
It renders this:
|
Apollo 11 (1969) · Apollo 12 (1969) · Apollo 14 (1971) · Apollo 15 (1971) · Apollo 16 (1972) · Apollo 17 (1972) |
Apollo 11(1969) · Apollo 12(1969) · Apollo 14(1971) · Apollo 15(1971) · Apollo 16(1972) · Apollo 17(1972) |
The left cell shows the style that is usually preferred, with a space between the link and any explanatory text.
{{nowrap begin}} and its helper templates work well even if they are surrounded by the nowraplinks template or class. They also avoid Firefox's "expanding outside the cell" bug. Thus {{nowrap begin}} + {{·w}} + {{nowrap end}} can (and should) be used on lines in the standard navboxes that fail due to the nowraplinks problems.
[edit] What about <nobr> + <wbr> + </nobr> ?
{{nowrap begin}} + {{wrap}} + {{nowrap end}} work much like the old, proprietary HTML elements <nobr> + <wbr> + </nobr>. These elements haven't been made part of XHTML 1.0 by the World Wide Web Consortium, and therefore MediaWiki does not allow them.
