Updated June 27, 2023
Introduction to CSS line break
The CSS line break breaks a line into two separate parts. This concept is really handy when we are dealing with newspaper paragraphs. Apart from paragraphs, we can also separate side-by-side images into two separate images; we can separate joined names, join any plain text, etc. In this topic, we will learn the working and the examples in detail.
How does line break in C work?
CSS line breaks can be done in many ways. They are listed below with their syntaxes.
- <br> tag
- display property
- white-space property
- flex-direction and display properties
1. <br> tag
We use this <br> tag to break the line wherever a break is required.
Syntax:
<html>
<body>
Some content
<br>
Again some content
<br>
Again some content
</body>
</html>2. display property
display property with block value gives you a break in the two attached lines.
Syntax:
p span {
display: block;
}
<p><span>content</span><span>content</span></p>3. white-space property
white-space property with pre-value gives you to break the lines.
Syntax:
p {
white-space: pre;
}
<p>Hi
I am Paramesh</p>4. flex-direction and display properties
flex-direction with column value and display property with flex value gives you to break the lines.
Syntax:
<p>hello <span>How are you</span></p>
p {
display: flex;
flex-direction: column;
}Examples of CSS line break
Here are the following examples:
Example #1 – With <br> tag
Code:
<!DOCTYPE html>
<html>
<title>
Line break
</title>
<head>
<style>
h1
{
color: green;
text-align: center;
}
p
{
color: blue;
border: solid 2px red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Line break with br tag</h1>
<p>CSS line break is used to break a line into 2 separate parts. This concept is really handy when we are dealing with newspapers paragraphs. Apart from paragraphs we can also separate side by side images into 2 separate images, we can separate joined names, joined any plain text etc.</p>
<br> <!--break the line we will get white space-->
<p>CSS line break is used to break a line into 2 separate parts. This concept is really handy when we are dealing with newspapers paragraphs. Apart from paragraphs we can also separate side by side images into 2 separate images, we can separate joined names, joined any plain text etc.</p>
<br> <!--break the line we will get white space-->
<p>CSS line break is used to break a line into 2 separate parts. This concept is really handy when we are dealing with newspapers paragraphs. Apart from paragraphs we can also separate side by side images into 2 separate images, we can separate joined names, joined any plain text etc.
</p>
</body>
</html>Output:
Example #2 – With display property
Code:
<!DOCTYPE html>
<html>
<title>
Line break
</title>
<head>
<style>
h1
{
color: blue;
text-align: center;
}
p
{
color: red;
border: solid 2px green;
font-size: 20px;
}
p span {
display: block;/*break the line*/
}
</style>
</head>
<body>
<h1>Line break with display property and block value</h1>
<p><span>CSS line break is used to break a line into 2 separate parts. This concept is really handy when we are dealing with newspapers paragraphs. Apart from paragraphs we can also separate side by side images into 2 separate images, we can separate joined names, joined any plain text etc.</span><span> CSS line break is used to break a line into 2 separate parts. This concept is really handy when we are dealing with newspapers paragraphs. Apart from paragraphs we can also separate side by side images into 2 separate images, we can separate joined names, joined any plain text etc.</span></p>
</body>
</html>Output:
Example #3 – With White-space property
Code:
<!DOCTYPE html>
<html>
<title>
Line break
</title>
<head>
<style>
h1
{
color: maroon;
text-align: center;
}
p
{
color: blue;
border: solid 2px purple;
font-size: 20px;
}
p{
white-space: pre;/*break the line*/
}
</style>
</head>
<body>
<h1>Line break with white-space property and pre value</h1>
<p>Hi, I am Paramesh.
Hi, I am Amardeep.</p>
</body>
</html>Output:
Example #4 – With flex-direction and display properties
Code:
<!DOCTYPE html>
<html>
<title>
Line break
</title>
<head>
<style>
h1
{
color: brown;
text-align: center;
}
p
{
color: navy;
border: solid 2px orange;
font-size: 20px;
}
p {
display: flex;
flex-direction: column;/*break the line*/
}
</style>
</head>
<body>
<h1>Line break with flex-direction and display properties with flex and column values respectively</h1>
<p>Hi, I am Paramesh<span>
CSS line break is used to break a line into 2 separate parts. This concept is really handy when we are dealing with newspapers paragraphs. Apart from paragraphs we can also separate side by side images into 2 separate images, we can separate joined names, joined any plain text etc.</span></p>
</body>
</html>Output:
Conclusion
The line break is used to break the line into two separate parts. This line break can be done in 4 ways like <br> tag, display, white-space, flex-direction, and display properties.
Recommended Articles
We hope that this EDUCBA information on “CSS line break” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
