Skip to content
Related Articles

Related Articles

Improve Article

How to define a possible line-break using HTML5 ?

  • Last Updated : 27 May, 2020

In this article, we define a possible line-break in HTML by using a <wbr> element. It stands for word break opportunity and is used to define the position within the text which is treated as a line break by the browser. It is mostly used when the used word is too long and there are chances that the browser may break lines at the wrong place for fitting the text.

Syntax:

<wbr>
    // Contents
</wbr>

Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to defines a possible 
        line-break using HTML5?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
  
        .geeks {
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        GeeksforGeeks
    </div>
  
    <h2>
        How to defines a
        possible line-break
    </h2>
  
    <p>
        GFGstandsforGeeksforGeeksanditis<wbr>
        acomputerscienceportalforgeeks.
    </p>
    <p>
        wbr element is a veryveryveryveryveryveryveryveryveryveryvery
        <wbr>longwordthatwillbreakatspecific<wbr>
        placeswhenthebrowserwindowisresized.
    </p>
    <b>By using the css Property
</body>
  
</html>       

Output:

Example 2:






<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to define a possible 
        line-break using HTML5?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
        HTML5: How to defines 
        a possible line-break?
    </h2>
  
    <!-- br tag is used here -->
    <p>
        GeeksforGeeks: <br
        Computer science portal
    </p>
</body>
  
</html>

Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :