Introduction to CSS line break
The CSS line break is used to break a line into 2 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 2 separate images, we can separate joined names, joined any plain text, etc. In this topic, we are going to learn the working and the examples in detail.
How does line break in C works?
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
Wherever break required we simply use this <br> tag to break the line.
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 break the 2 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 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 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 mention below
Example #1
Line break 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
Line break with the 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
Line break 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
Line break 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 2 separate parts. This line break can be done in 4 ways like <br> tag, display, white-space and flex-direction, and display properties.
Recommended Articles
This is a guide to the CSS line break. Here we discuss an introduction to CSS line break, how does it work along with respective examples. You may also look at the following articles to learn more –
