Skip to content
Related Articles

Related Articles

Improve Article
How to define word-break property to allow words to be continued to the next line in CSS ?
  • Difficulty Level : Basic
  • Last Updated : 27 Apr, 2021

In this article, we will see how to define word-break property to allow words to be continued to the next line in CSS. You can use break-all and break-word property value 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 broken the words at arbitrary points to prevent overflow.

Example 1: 

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:

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 overflow-wrap property.

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :