The wbr tag
The wbr tag specifies a place where the browser can make a line break if necessary (if the text does not fit the width of the element). Such breaks are called soft.
Does not require a closing tag.
When hyphenating a word through the wbr tag, the hyphenation symbol "-" is not added. If you need it, use the soft hyphenation symbol (the semicolon at the end is required, this is not a typo).
The soft hyphen tells the browser where it can hyphenate a word (if necessary), by adding the hyphen "-" character.
Soft hyphens will not work if the hyphens property is set to none (but hyphens wbr will work).
Example . Text without hyphenation
Let's look at a sample text that has long words that extend beyond the block. We'll set the block to a small width so that the big word won't fit in it:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Example . Tag wbr
And here, let's add the wbr tag in places where we recommend the browser to hyphenate words if necessary (note that the browser will not hyphenate words everywhere we specify):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Example . Symbol
Let's try replacing the wbr tag with the symbol. Hyphens will be displayed in the places where the hyphenation occurs:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
See also
-
tag
br,
which makes a line break -
property
hyphens,
which sets the actual hyphenation -
properties
word-breakandoverflow-wrap,
which allow you to move the letters of a long word -
property
overflow,
which cuts off parts that extend beyond the block boundary
