html

Create Line Breaks Without Having to Use br in HTML

There are several tags in HTML that provide particular functionalities to web pages. These tags are of two types: container tags and empty tags. The container tags consist of a start tag and an end tag, while the empty tags consist of only the start tag. More specifically, the “<br>” tag is one of them. It is an empty tag that creates a line break in HTML. Although, there are various other methods for creating a line break instead of using this “<br>” tag.

This post will instruct you:

How to Create a Line Break Utilizing the CSS “white-space: pre” Property?

The “white-space” CSS property helps for controlling the white spaces within the elements. The “pre” value displays the text wrapped in line breaks.

Let’s take a look at the below-stated example for the demonstration.

Example

In HTML, add a “<div>” element associated with the “style” attribute having the CSS “white-space: pre” property:

<div style="white-space: pre">
 Linuxhint
 Linuxhint
</div>

Output

How to Create a Line Break Utilizing the CSS “display = block” Property?

The CSS “display” property sets the element’s display behavior. Moreover, its “block” value sets the element’s width to 100%.

Example

Check out the example below:

  • In HTML, add the “<p>” element.
  • Inside the “<p>” element, include two “span” elements with some text content:
<p>
 <span>Linuxhint</span>
 <span>Linuxhint</span>
</p>

Output

Note that the “<span>” is an inline element, so both of them will display on one line. To make each of them display on one line (full width), it is required to set the “display” property of the “<span>” element as “block”.

Style “span” Element

p span {
 display: block;
 text-align:center;
}

The “p span” refers to the “<span>” element having parent “<p>”. This element is styled using the following properties:

  • display” property defines the element’s display behavior, whereas the “block” value makes the element’s full width.
  • text-align” defines the text alignment as “center”.

Output

That was all about creating line breaks without using “<br>” in HTML.

Conclusion

In HTML, the “<br>” tag is utilized to add a line break in a document. However, line breaks can be added without using the “<br>” tag. For this purpose, the most common properties are the CSS “display: block” for inline elements and “white-space: pre” for displaying the formatted text. This post has explained how to create line breaks without using “<br>” in HTML.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.