HTML - <wbr> Tag

HTML <wbr> tag is use to define the position within the text that is treated as a line break by the browser. This tag is useful when a word is too long and the browser might break it at the wrong place. You can use the <wbr> tag to identify word-break opportunities. This is a new tag included in HTML5

Syntax

<wbr>

Attribute

HTML wbr tag supports Global and Event attributes of HTML.

Examples of HTML wbr Tag

Bellow examples will illustrate the usage of wbr tag, where, when and how to use wbr tag to allow breaking in a sentence.

Breaking Lengthy Word

Depending the screen size we allowed breaing in between some word if that is nont vibsile on the viewport. This sill be done using HTML <wbr> tag.

<!DOCTYPE html>
<html>
<body>
   <h1>tutorialspoint</h1>
   <h2> example of wbr Tag</h2>
   <p>tutorialspointPvtLtdHyderabadEasyToLearn 
      <wbr>acomputerscienceportalforTutorialsAndCourses.
   </p>
</body>
</html>

Breaking Lengthy Breadcrumbs

Some times we need to break Breadcrumbs, when it becomes so lengthy that it is not visible on regular viewport, at that time we allow it to break into multiple lines.

<!DOCTYPE html>
<html>
<body>
   <h1>tutorialspoint</h1>
   <h2> example of wbr Tag</h2>
   <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>
</body>
</html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
wbr Yes 1.0 Yes 12.0 Yes 3.0 Yes 4.0 Yes 11.7
html_tags_reference.htm
Advertisements