Open In App

How to use line break in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 wordbreak property in CSS that is used to specify how a word should be broken or split when reaching the end of a line. The wordwrap property is used to split/break long words and wrap them into the next line. The overflowwrap 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.



Last Updated : 25 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads