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 by Utilizing the CSS “whitespace = pre” property?
- How to create a line break by Utilizing the CSS “display = block” property?
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:
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:
<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
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.
