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

<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.
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:

<!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

Example
Example

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:

<!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:

<!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>