How To Add Line Break in CSS?

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.

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

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

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

Note: CSS cannot create a true line break exactly like the <br> element. However, it can simulate line breaks in several ways:

• Using display: block to force a new line.
• Using white-space to preserve line breaks.
• Using content: "\A" in pseudo-elements to insert a break.