CSS: How to Add a Line Break

In web development, line breaks are essential for formatting text or structuring content clearly. While HTML provides the <br> tag for manual line breaks, CSS also offers elegant ways to control and influence line breaks—especially in dynamic or responsive designs.

In this guide, you’ll learn how to add and manage line breaks using both HTML and CSS, depending on your use case.

✅ Method 1: Add a Manual Line Break Using HTML

The most direct way to add a line break is by using the HTML <br> tag.

<p>This is the first line.<br>This is the second line.</p>

🔹 Use when you want to force a new line within text.

✅ Method 2: Add a Line Break Using CSS display Property

If you want an element to behave like a line break, you can style it with:

.break {
  display: block;
  width: 100%;
}

Example:

<span>This is text</span>
<span class="break"></span>
<span>This is on the next line</span>

✅ Method 3: Add Line Break After or Before with ::after or ::before

You can inject a line break with CSS content:

.break-line::after {
  content: "\A";
  white-space: pre;
}

Example:

<p class="break-line">Line One Line Two</p>

This will break after “Line One”.

✅ Method 4: Use white-space Property

Sometimes, you want the text to wrap or preserve spacing including line breaks in your content.

.preserve-breaks {
  white-space: pre-line;
}

Example:

<p class="preserve-breaks">
This is line one.
This is line two.
</p>

This will respect the line breaks and spacing as typed.

🚫 What Not to Do

Avoid using multiple <br> tags for spacing. Instead, use margins or padding in CSS:

p {
  margin-bottom: 1rem;
}

🧠 Conclusion

Whether you’re creating a simple text layout or dynamically inserting content, you can control line breaks effectively with a combination of HTML and CSS tools:

• Use <br> for manual breaks.
• Use display: block or ::after for dynamic structure.
• Use white-space for text content with built-in breaks.

Mastering these techniques ensures clean, responsive, and well-structured UI designs.