W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


Share it

wbr intro wbr browser display wbr parents br vs wbr wbr syntax

HTML5 wbr element

The wbr element allows you to add a line break opportunity. »video

About wbr

Display & support wbr

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children wbr

Attributes wbr

br Element vs wbr Element

The difference between br (line break) and wbr (line break opportunity) »video

Syntax wbr

1<wbr> »video

Attributes and Values wbr (comma separated)

<wbrattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img
2.class=class name»html »img
3.contenteditable="",  , true, false »html
4.contextmenu=menu id value»html
5.data-*= value -
6.dir=ltr, rtl, auto»html
7.draggable= true,  , false»img
8.dropzone= copy, move, link, string:, file: -
9.hidden= "",  , hidden»html »img
10.id=id name»html »img
11.itemid= URL -
12.itemprop= string »link »a
13.itemref= string -
14.itemscope= "",  , itemscope-
15.itemtype= absolute URL -
16.lang=language code »html »head»title »img
17.spellcheck="",  , true, false»html
18.style=CSS property:value»html »img
19.tabindex= integer »img
20.title=text»html »link»style »abbr»dfn
»img »meter
21.translate="", yes, no»html »img
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration wbr element

HTML5 wbr element: add a line break opportunity

min video details
00:00 video tutorial: wbr element
00:05 wbr element allows you to add a line break opportunity; basically it creates a breaking point, where the browser may break the line in case of width constraints
00:14 let's add a line break after d, so the browser may break the line here
00:24 the breaking point is here, let's just create a width constraint by shrinking the browser window
00:29 the current line breaks after this breaking point pushing the rest of the content on the next line
00:33 no other wbr elements inside 'yabadabadooo...' word → no other breaks
00:42 you can add as many wbr elements as you want
00:51 multiple wbr elements inside the long word, → multiple breaking points

For more information about the wbr element, please see the specs: W3CWHATWG