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>
<p>
GeeksforGeeks: <br>
Computer science portal
</p>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari