Help:Line-break handling: Difference between revisions

Revision as of 06:45, 23 January 2022

Latest revision as of 21:51, 30 July 2025

(44 intermediate revisions by 17 users not shown)

Line 4:

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 [[Line wrap and word wrap|wrap the line]]s where there are natural breaks such as spaces, hyphens, etc. in the text.

== Causing line breaks ==

===Newlines===

{{see|Wikipedia:Line breaks usage|Wikipedia:Manual of Style#Controlling line breaks}}

{{shortcut|H:PARAGRAPH}}

{{see|Wikipedia:Don't use line breaks|Wikipedia:Manual of Style#Controlling line breaks}}

There are several ways to force [[newline|line breaks]] and [[hard return|paragraph breaks]] in the text. The simplest method is by inserting newlines; for example:

Line 36:

}}

=== <br /> or <br> ===

{{shortcut|H:BR}}{{anchor|<br> or <br />|br|br/|br /}}

<code><nowiki><br></nowiki></code>, <code><nowiki><br ></nowiki></code>, <code><nowiki><br/></nowiki></code>, <code><nowiki><br /></nowiki></code>

The {{tag|br|s}} or {{tag|br|o}} tags are used for a single forced line break. For content that is semantically a list, such as in infoboxes, actual list markup is preferred. See {{format link|#Lists}} below.

The [[MediaWiki]] software uses any of them for a single forced line break. All of them are converted to {{tag|br|s}} in the HTML that browsers read.

MediaWiki also converts <code><nowiki></br></nowiki></code> to {{tag|br|s}}, but this form is invalid. Please correct these tags.

For content that is semantically a list, such as in infoboxes, actual list markup is preferred. See {{format link|#Lists}} below.

{{markup

|<nowiki>And this line of text<br />will break in the middle.</nowiki>

|And this line of text<br />will break in the middle.

}}

The example below includes four forms that are rendered as line breaks and two that display as plain text.

The MediaWiki software converts valid forms like {{tag|br|o}}, {{tag|br/|o}}, and {{tag|br&nbsp;|o}} to {{tag|br|s}}. It also converts the invalid form {{tag|br|c}} to {{tag|br|s}}. The invalid forms {{tag|&nbsp;br|o}} and {{tag|&nbsp;br|c}} are not converted and will not create line breaks.

<div style="display:inline-table; border: 2px solid var(--border-color-content-added); padding: 0.5em;">

'''Wiki source'''

<nowiki>One <br>Two <br >Three <br/>Four <br />Five < br>Six </ br>Seven</nowiki>

While valid forms without the <code>/</code> (such as {{tag|br|o}} or {{tag|br&nbsp;|o}}) will work properly in the rendered page, the uncommon form {{tag|br&nbsp;|o}} can break several of the available [[Wikipedia:Syntax highlighting|syntax highlighters]] for wiki code in the editing view (mis-highlighting all text in the page after the occurrence of that tag), and so should be avoided. {{As of|2019|04|post=,}} the rather common form {{tag|br|o}} {{em|also}} causes this incorrect display in some of them, and is thus better avoided for the time being.

</div>

<div style="display:inline-table; border: 2px solid var(--border-color-content-added); padding: 0.5em;">

Please correct invalid occurrences&nbsp;– such as {{tag|br|c}}, {{tag|&nbsp;br|o}}, or {{tag|&nbsp;br|c}}&nbsp;– to {{tag|br|s}} as you encounter them, though preferably as a part of a more substantive edit.

'''Rendered result'''

One <br>Two <br >Three <br/>Four <br />Five < br>Six </ br>Seven

</div>

=== &lt;poem> ===

Line 86 ⟶ 99:

Enfolding sunny spots of greenery.

</poem>

}}

=== &lt;pre> ===

{{xtag|pre|p}} and its alternatives are typically used to display code; their contents are rendered in [[monospace]] with a frame and different background colour. Both markup and newlines within {{tag|pre}} are reproduced verbatim. However, the first newline after {{tag|pre|o}} and last newline before {{tag|pre|c}} are ignored, allowing the tags to be placed on their own lines without extra empty lines appearing on the page.

{{markupv

|

m=<nowiki><pre>

{{2x|foo}}<br />bar

[[wiki]]

</pre></nowiki>

|

r=<pre>

{{2x|foo}}<br />bar

[[wiki]]

</pre>

}}

To evaluate markup while still preserving newlines, the alternatives <code><nowiki><pre<includeonly></includeonly>></pre></nowiki></code> and {{tl|Pre}} can be used.

{{markupv

|

m=<nowiki>{{Pre |

{{2x|foo}}<br />bar

[[wiki]]

}}</nowiki>

|

r={{Pre |

{{2x|foo}}<br />bar

[[wiki]]

}}

}}

=== &lt;nowiki> ===

UnderThe effect of the tag {{tagxtag|nowiki|link=Help:Wikitext#Nowikip}}, anyon line breaks is that single orand double line breaks are ignored, and you also cannot add a line break with {{tag|br|os}}:

{{markupv

Line 99 ⟶ 142:

are ignored,

and the tag <br />

is just displayed as is.

&lt;/nowiki>

Line 108 ⟶ 151:

are ignored,

and the tag <br />

is just displayed as is.

</nowiki>

}}

There are several ways to dealenable withline thisbreaks problemin text that uses {{tag|nowiki}}:

'''Solution 1'''. Use {{tag|nowiki}} for each line separately, with <{{tag|br|o>s}} or double newline between lines.

{{markupv

{{markup

|

&lt;m=<nowiki><nowiki>Around Firstthe lineentire line,&lt;/nowiki> <br />

or only around text that must be escaped: <nowiki>{{2x|bar}}&lt;/nowiki>.

&lt;nowiki> Second line &lt;/nowiki>

&lt;<nowiki> ThirdExtra line spaces are still collapsed. &lt;/nowiki></nowiki>

|

r=<nowiki>Around Firstthe lineentire line,</nowiki> <br />

or only around text that must be escaped: <nowiki>{{2x|bar}}</nowiki>.

<nowiki> Second line </nowiki>

<nowiki> ThirdExtra line spaces are still collapsed. </nowiki>

}}

'''Solution 2''': Instead ofUse {{tag|nowikipoem}}, use {{tag|pre}} or {{tl|pre}}. It will keep your line breaks.

{{markupv

|m=

m=&lt;poem>&lt;nowiki>Twas bryllyg, and ''y^e'' slythy toves

&lt;pre>

Did gyre and gymble in ''y^e'' wabe:

First line

All mimsy were ''y^e'' borogoves,

Second line

And ''y^e'' mome raths outgrabe.&lt;/nowiki>&lt;/poem>

</pre>

|r=

r=<prepoem>

<nowiki>Twas bryllyg, and ''y^e'' slythy toves

First line

Did gyre and gymble in ''y^e'' wabe:

Second line

All mimsy were ''y^e'' borogoves,

</pre>

And ''y^e'' mome raths outgrabe.

</nowiki></poem>

}}

When {{tag|poem}} is used with {{tag|nowiki}}, the contents must begin on the same line as the tags, because a leading newline will appear in the output. However, the last newline ''is'' ignored, so the closing tags may be on their own line.

{{markupv

|m=

<nowiki>{{</nowiki>Pre <nowiki>|</nowiki>

First line

Second line

<nowiki>}}</nowiki>

|r=

{{Pre |

First line

Second line

}}

}}

'''Solution 3''': Use {{tag|poem}} to keep your line breaks.

{{markup

|

&lt;m=<nowiki><poem> &lt;<nowiki>

Extra line above

’Twas brillig, and the slithy toves

&lt;/nowiki></poem></nowiki>

Did gyre and gimble in the wabe:

|

All mimsy were the borogoves,

r=<poem><nowiki>

And the mome raths outgrabe.

Extra line above

</nowiki></poem>

|<poem><nowiki>

’Twas brillig, and the slithy toves

Did gyre and gimble in the wabe:

All mimsy were the borogoves,

And the mome raths outgrabe.

</nowiki></poem>

}}

'''Solution 3''': Consider using [[#&lt;pre>|&lt;pre>]] instead of {{tag|nowiki}}.

=== Lists ===

Line 202 ⟶ 229:

== Preventing and controlling word wraps ==

{{Nutshell|title=This section|To prevent word wraps use <code>&amp;nbsp;</code> in place of each space,; and oruse <code>&amp;#8209;</code> in place of aeach hyphen. For more complex cases, see below.}}

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.

Line 247 ⟶ 274:

{{awrap|{{tlx|awrap}} is a shorthand of the latter.}}

{{markup

{{inline block|{{color|blue|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.}}}}

|<nowiki>{{inline block|{{color|greenblue|Sed ut perspiciatis unde omnis iste natus error sit voluptatemLorem accusantium.}}}}ipsum

dolor sit amet, consectetur adipiscing

elit, sed do eiusmod tempor incididunt.}}}}</nowiki>
|{{avoidinline wrapblock|{{color|blue|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.}}}}

|<nowiki>{{avoidinline wrapblock|{{color|green|Sed ut perspiciatis
unde omnis iste natus error sit
voluptatem accusantium.}}}}</nowiki>

|{{inline block|{{color|green|Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.}}}}

|<nowiki>{{avoid wrap|{{color|blue|Lorem ipsum

dolor sit amet, consectetur adipiscing

elit, sed do eiusmod tempor incididunt.}}}}</nowiki>

|{{avoid wrap|{{color|blue|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.}}}}

|<nowiki>{{awrap|{{color|green|Sed ut perspiciatis

unde omnis iste natus error sit

voluptatem accusantium.}}}}</nowiki>

|{{awrap|{{color|green|Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.}}}}

}}

<small>Both put the content in <code><nowiki><span style="display:inline-block;"></nowiki></code>. The latter also adds the CSS class "avoidwrap".</small>

=== <nowiki>{{nowrap}}</nowiki> ===

{{anchor|nowrap}}

{{shortcut|WP:NOWRAP}}

{{redirect|WP:NOWRAP|the Manual of Style guideline|MOS:NOWRAP}}

The {{tl|nowrap}} template is less flexible and will prevent breaks even when the line is too long for the window, forcing the user to scroll:

Line 306 ⟶ 347:

:< 3

=== &lt;wbr /> and soft hyphens===

{{anchor|wbr|&lt;wbr&gt;}}

To insert a word-break opportunity, use {{tag|wbr|o}}.

{{tag|wbr|s}} is a word-break opportunity; that is, it specifies where it would be OK to add a line-break where a word is too long, or it is perceived that the browser will break a line at the wrong place.

It specifies where it would be OK to add a line-break where a word is too long, or it is perceived that the browser will break a line at the wrong place. Whether the line actually breaks is then left up to the browser. The break will look like a space - see soft hyphen below when it would be more appropriate to break the word or line using a hyphen.

{{markupv

|markup=<nowiki>Now is the time to become a power editor, by learning Hyper<wbr />Text Markup Language...</nowiki>

|renders=It may render like this:

:Now is the time to become a power editor, by learning HyperText Markup Language...

Line 321 ⟶ 364:

}}

Note that {{tag|wbr|so}} will not work inside {{tl|nowrap}}.

In many cases breaking up a word with a space would be inappropriate. [[Soft hyphenshyphen]]s also create acreates word-break opportunityopportunities, but will add a hyphen rather than a space. TheIn codeother <code>&amp;shy;</code>words, a soft hyphen is employeda inhyphen theinserted sameinto mannera asword {{tag|wbr|s}}not asotherwise seenhyphenated, into be displayed or typeset only if it falls at the examplesend of a line of abovetext.

The code <code>&amp;shy;</code> is employed in the same manner as {{tag|wbr|o}}. For example:

{{markup

|<nowiki>This long German word Datenschutz&amp;shy;erklärung breaks between its constituent parts "Datenschutz" and "erklärung".</nowiki>

|This long German word Datenschutz&shy;erklärung breaks between its constituent parts "Datenschutz" and "erklärung".

}}

Use of soft hyphens should be limited to special cases, usually involving [[Longest English words|very long words]] or narrow spaces (such as captions in [[infobox|infoboxes]] or other tight page layouts, or column labels in narrow tables). Widespread use of soft hyphens is strongly discouraged, because it makes the wikitext very difficult to read and to edit. For example:

Line 331 ⟶ 381:

|This Wikisource example is difficult to understand

}}

Consider instead using the {{tlx|shy}} template for such complex cases:

{{markup

Line 342 ⟶ 394:

{{anchor|nowraplinks}}

In lists of links such as inside infoboxes and [[WP:NAVBOX|navboxes]], use thea [[WP:HLIST|CSShorizontal class ''hlist''list]] (perhaps via the template {{tl|flatlist}}) to format lists.

For occasional cases where you need to delineate two pieces of text outside of a list, you can use the templates {{tn|·}} or {{tn|•}} which contain a <code>&amp;nbsp;</code> before the dot, thus handling some of the wrapping problems.

== See also ==

* [[metamw:HelpManual:Newlines and spaces]]

* {{tl|break}}

* {{tl|clear}}