Skip to content
Related Articles

Related Articles

How to define a possible line-break using HTML5 ?

View Discussion
Improve Article
Save Article
  • 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!