How to use line break in CSS ?
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.
Last Updated :
25 Jul, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...