Appearance
How to Break Line Without Using <br> Tag in CSS
There are a few ways to break a line without using a <br> tag. For that, we can use block-level elements.
Block-level elements start on a new line by default (if a CSS rule does not override the default behavior). Here, you can find how to make inline elements start on a new line.
In this snippet, we’ll use the following properties:
- white-space: pre for making elements act like
<pre>, - display: block for representing an element as a block element.
Let’s see how to break a line using the white-space property. This property specifies how the white space within an element must be handled. A white space can be a space sequence or a line break.
Create HTML
How to Break Line Without Using <br> Tag in CSS
html
<h1>W3Docs</h1>
<div>
Example
Example
</div>Add CSS
- Use the text-align property set to “center” for the
<body>element. - Add color to
<h1>. - Use the white-space property set to “pre” for the
<div>element.
How to Break Line Without Using <br> Tag in CSS
css
body {
text-align: center;
}
h1 {
color: #000000;
}
div {
white-space: pre;
}Let’s see the result of our code.
Example of breaking a line using the white-space property:
Example of breaking line using the white-space property:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
}
h1 {
color: #000000;
}
div {
white-space: pre;
}
</style>
</head>
<body>
<h1>W3Docs</h1>
<div>
Example
Example
</div>
</body>
</html>Result
W3Docs
<div> Example Example </div>Next, we’ll show how to break a line with the display property. We need to set display: block to represent an element as a block element. In the following example, we set display: block to the <span> element which is inside a <p> element.
Example of breaking a line using the display property:
Example of breaking line using the display property:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
}
h1 {
color: #000000;
}
p span {
display: block;
}
</style>
</head>
<body>
<h1>
W3Docs
</h1>
<p>
<span>Example_1</span>
<span>Example_2</span>
</p>
</body>
</html>Also, you can use the carriage return character (\A) as content in pseudo-element.
It is possible to add a new line using ::before and ::after pseudo-elements.
Example of breaking a line using the ::after pseudo-element:
How to Break Line Without Using <br> Tag in CSS
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.line:after {
content: '\A';
white-space: pre;
}
</style>
</head>
<body>
<h3>
<span class="line">This is the first line</span>
<span class="secondary-label">second line</span>
</h3>
</body>
</html>