Open In App

How to define word-break property to allow words to be continued to the next line in CSS ?

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

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.

HTML




<!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.

HTML




<!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;

HTML




<!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


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