Open In App

How to define a possible line-break using HTML5 ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 27 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads