How to use line break in CSS ?

25 Jul, 2021
In this article, we will learn how to break a line of any statement using properties of CSS. You must know <br> tag that is used in HTML to break the line. But in this article, we will use only CSS to perform this task.
We use the word–break property in CSS that is used to specify how a word should be broken or split when reaching the end of a line. The word–wrap property is used to split/break long words and wrap them into the next line. The overflow–wrap CSS property is applicable to inline elements & specifies that the browser can break the line inside the selected element into multiple lines in an otherwise unbreakable place.
.word {
    width: 200px;
    overflow-wrap: break-word;  
    word-wrap: break-word; 
    word-break: break-word;
}

In this CSS, we need to specify a width from where the line break should start. In the above code, the line break will start after achieving a width of 200px.
Example 1: When width is 200px
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />      <style>        .word {            width: 200px;            overflow-wrap: break-word;            word-wrap: break-word;            word-break: break-word;        }    </style></head>  <body>    <p class="word">        GATE(Graduate Aptitude in Engineering)         is one the most important and in-demand         entrance exam for engineering graduates         in our country. Geeksforgeeks is here         to guide you through the GATE Computer         Science Engineering preparation.         Geeksforgeeks brings you the Complete         GATE preparation course GATE-CS Test         Series 2022, which will help the GATE        aspirants to boost their GATE score         and AIR.An extensive Online Test Series         for GATE CSE to boost your preparation.         Test series is designed considering the         pattern of previous years GATE papers         and ensures to resemble with the         standard of GATE 2022 exam.    </p></body>  </html>
Output: In this example, there is a line-break after 200px.
Example 2: When width is 500px
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />      <style>        .word {            width: 500px;            overflow-wrap: break-word;            word-wrap: break-word;            word-break: break-word;        }    </style></head>  <body>    <p class="word">        GATE(Graduate Aptitude in Engineering)         is one the most important and in-demand         entrance exam for engineering graduates         in our country. Geeksforgeeks is here         to guide you through the GATE Computer         Science Engineering preparation.         Geeksforgeeks brings you the Complete         GATE preparation course GATE-CS Test         Series 2022, which will help the GATE        aspirants to boost their GATE score         and AIR.An extensive Online Test Series         for GATE CSE to boost your preparation.         Test series is designed considering the         pattern of previous years GATE papers         and ensures to resemble with the         standard of GATE 2022 exam.    </p></body>  </html>
Output: In this example, there is a line-break after 500px.
CSS-Properties
CSS-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.