: The Line Break Opportunity element #

::: section-content The  HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Fernstraßenbauprivatfinanzierungsgesetz

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} #example-paragraphs { background-color: white; overflow: hidden; resize: horizontal; width: 9rem; border: 2px dashed #999; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element only includes the global attributes. :::

Notes #

::: section-content On UTF-8 encoded pages,  behaves like the U+200B ZERO-WIDTH SPACE code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect on bidi-ordering: <div dir=rtl>123,456 displays, when not broken on two lines, 123,456 and not 456,123.

For the same reason, the  element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity () instead. :::

Examples #

::: section-content The Yahoo Style Guide{target="_blank"} recommends breaking a URL before punctuation{target="_blank"}, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the URL.

::: code-example [html]{.language-name}

<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>

::: :::

Result #

::: section-content ::: {#sect1 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Content categories	Flow content, phrasing content.
Permitted content	Empty
Tag omission	It is a void element; it must have a start tag, but must not have an end tag.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	`HTMLElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-wbr-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

      Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

wbr 1 79 1 5.5–7 11.6 4 4.4 18 4 12 3.2 1.0 :::

<wbr>: The Line Break Opportunity element #

Try it #

HTML Demo: <wbr> #

Output #

Console Output #

Attributes #

Notes #

Examples #

Result #

Technical summary #

Specifications #

::: _table #

Specification #

Browser compatibility #

See also #