How to use line break in CSS ?
Last Updated :
15 Apr, 2024
Using CSS, line breaks are controlled through properties like white-space, display, or inserting content with ::before and::after pseudo-elements. These methods determine how text wraps and displays within elements.
1. Using::after to insert a line break:
In CSS, using the ::after pseudo-element with `content: “\A”` inserts a line break after an element’s content. Setting `white-space: pre` ensures the line break is preserved, facilitating a custom text layout.
Syntax:
selector::pseudo-element {
property: value;
}Example: In this example we inserts line breaks using CSS’s ::after pseudo-element. Each span, identified by #content1 and #content2, displays content on separate lines.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<style>
#content1::after,
#content2::after {
content: "\A";
white-space: pre;
display: block;
}
</style>
</head>
<body>
<h3> Using ::after to insert a line-break:</h3>
<span id="content1">The first line.</span
><span id="content2"
>The second line.</span
>
</body>
</html>
Output:
Using ::after to insert a line-break Example Output
2. Using ::before to insert a line-break:
Using CSS’s ::before pseudo-element, insert a line break before an element’s content by setting its content property to “\A” and applying white-space: pre to preserve the line break. This allows for visual separation or formatting within elements.
Syntax:
selector::pseudo-element {
property: value;
}Example: In this example we inserts line breaks before content using CSS’s ::before pseudo-element. Each span, identified by .line-break, displays content on separate lines.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<style>
.line-break::before {
content: "\A";
white-space: pre;
display: block;
}
</style>
</head>
<body>
<h3>
Using ::before to insert a line-break:
</h3>
<span class="line-break"
>The first line.</span
>
<span class="line-break"
>The second line.</span
>
</body>
</html>
Output:
Using ::before to insert a line-break Example Output
3. Using display property
The CSS display property, when set to block, creates line breaks by rendering elements on separate lines. This property can be applied to block-level elements or elements modified to behave like blocks.
Syntax:
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<style>
.line-break-block {
display: block;
}
.line-break-inline-block {
display: inline-block;
}
</style>
</head>
<body>
<h3>
Using display property for line
breaks:
</h3>
<!-- Using display: block -->
<div class="line-break-block">
The first line.
</div>
<div class="line-break-block">
The second line.
</div>
<!-- Using display: inline-block -->
<span class="line-break-inline-block"
>The third line.</span
>
<span class="line-break-inline-block"
>The fourth line.</span
>
</body>
</html>
Output:
Using display property Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...