In this article, we will see how to define a word-break property to allow words to be continued to the next line in CSS. You can use break-all and break-word property values to define the word-break property which is used to specify how to break the word when the word reached at end of the line.
Syntax:
word-break: break-all | break-word;
Property Value:
- break-all: It is used to break the words at any character to prevent overflow.
- break-word: It is used to break the words at arbitrary points to prevent overflow.
Example 1: In this example, we are using the above-explained method.
<!DOCTYPE html><html>
<head>
<style>
h1 {
color: green;
}
.gfg {
width: 140px;
border: 1px solid #CCFF00;
word-break: break-all;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks </h1>
<h2>word-break: break-all;</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks. A computer
science portal for geeks.
</p>
</center>
</body>
</html>
|
Output:
Example 2: Here is another example of using the word-break property.
<!DOCTYPE html><html>
<head>
<style>
h1 {
color: green;
}
.gfg {
width: 140px;
border: 3px double green;
word-break: break-word;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks </h1>
<h2>word-break: break-word;</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks. A computer
science portal for geeks.
</p>
</center>
</body>
</html>
|
Output:
Example 3: In this example, we will use the overflow-wrap property. The overflow-wrap property in CSS is used to specify that the browser may break lines of text inside any targeted element to prevent overflow when the original string is too long to fit.
Syntax:
overflow-wrap: break-word;
<!DOCTYPE html><html>
<head>
<style>
h1 {
color: green;
}
.gfg {
width: 140px;
border: 3px double green;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks </h1>
<h2>overflow-wrap</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks. A computer
science portal for geeks.
</p>
</center>
</body>
</html>
|
Output:
Supported browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari