How To Add Line Break in CSS?

How To Add Line Break in CSS?

Last Updated : 11 Jan, 2025

CSS provides flexible options to add or manage line breaks in your content. Here are some effective techniques:

1. Using the white-space Property

The white-space property allows controlling how text wraps and respects line breaks within an element.

HTML

<html>
<head>
    <style>
        .break {
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="break">
        This is the first line. 
        This is the second line.
    </div>
</body>
</html>

white-space: pre-wrap; preserves line breaks in the HTML source code while wrapping long lines automatically.
The text inside the .break class will render with line breaks exactly as written.

2. Using display: block for Inline Elements

Changing the display property of inline elements to block can create line breaks between elements.

HTML

<html>
<head>
    <style>
        .break {
            display: block;
        }
    </style>
</head>
<body>
    <span class="break">Line 1</span>
    <span class="break">Line 2</span>
</body>
</html>

Setting display: block; makes inline elements occupy their own line, creating a visual line break.

3. Using ::after Pseudo-Element

The ::after pseudo-element can insert content, including line breaks.

HTML

<html>
<head>
    <style>
        .break::after {
            content: "\A";
            white-space: pre;
        }
    </style>
</head>
<body>
    <p class="break">This line will break here</p>
    <p>Second line </p>
</body>
</html>

content: "\A"; inserts a line break after the element's content.
white-space: pre; ensures the line break is respected in the rendered output.

How To Add Line Break in CSS?

A

abdal0672

Improve

Article Tags :

Similar Reads

How to Change Line Spacing in CSS?

The line-height property in CSS is used to adjust line spacing between lines of text.Syntaxline-height: value;Example 1: In this example, we will increase the line height using the CSS line-height property.HTML<h3>Paragraph with Default Line Spacing</h3> <p> HTML stands for HyperTe

How to create a New Line in PHP ?

When working with text output in PHP, like creating a webpage, sending an email, or saving to a file, it's important to know how to add a new line. Adding a new line helps break up the text, makes it easier to read, and keeps it looking right whether it's shown in a browser, a terminal, or a file.Ho

How To Add Border In HTML?

Adding Borders to HTML elements is a common way to enhance the presentation and layout of web pages. Borders can be added to divs, paragraphs, images, and tables to separate or highlight content visually. CSS can provide several properties to customize the borders, such as color, style, and width.Th

How to set a single line break in HTML5 ?

In this article, we will add a single line break using the <br> tag. It s used to give the single line break. It is the empty tag so it does not contain end tag. Syntax: <br> Example 1: This example uses <br> tag to break the line. html <!DOCTYPE html> <html> <head

How to add line break using <br> Tag in HTML?

The <br> tag is used to create a line break in HTML. It allows you to break text into a new line without starting a new paragraph or block. This is helpful when you need to format text in a specific way, like in poems or addresses. For adding a line break, simply insert the <br> tag wher