CSS: How to Break a Line – The Complete Beginner’s Guide

In web design, controlling how and when text breaks onto a new line is crucial for readability, layout structure, and responsive behavior. Whether you’re designing paragraphs, buttons, or headlines, understanding how to break lines using CSS can make your content look clean and user-friendly.

In this guide, you’ll learn the different ways to break lines with CSS, along with practical examples.

Table of Contents

✂️ 1. Line Breaks with `<br>` (HTML Approach)

Before diving into CSS, it’s important to know that the <br> tag is the HTML way to insert a manual line break.

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

While useful, <br> should be avoided for layout purposes and used only when a semantic break in text is needed.

🎯 2. Force Line Breaks with CSS

✅ `white-space` Property

The white-space CSS property is your go-to tool for controlling automatic and manual line breaks.

🔧 Example:

.break-lines {
  white-space: normal;
}

Common Values:

Value	Description
`normal`	Default. Text will wrap normally.
`nowrap`	Prevents all line breaks. Text stays in one line.
`pre`	Preserves line breaks and spaces (like `<pre>` tag).
`pre-wrap`	Preserves whitespace and wraps when needed.
`pre-line`	Collapses whitespace but preserves line breaks.

📌 Demo Example:

<div class="wrap-text">
  This is some text that will wrap and break into multiple lines as needed.
</div>

<style>
  .wrap-text {
    width: 200px;
    white-space: normal;
    border: 1px solid #ccc;
  }
</style>

🔁 3. Break Lines in Long Text (Without Spaces)

Sometimes you need to break text even when there are no spaces. This is common with long URLs or unformatted content.

Use `word-break` or `overflow-wrap`:

.break-long {
  word-break: break-word;
  overflow-wrap: break-word;
}

🪄 4. Break After or Before Specific Elements

Example with `display: block;`:

span.break-here {
  display: block;
}

HTML:

<span>Hello</span><span class="break-here">World</span>

This forces “World” to appear on a new line.

🔍 5. Add Line Break After Specific Words or Phrases

If you want a line to break after certain content, use the ::after pseudo-element with display: block.

.break::after {
  content: "";
  display: block;
}

<span class="break">Welcome</span> to our site!

🧾 Conclusion

CSS gives you several powerful tools to control line breaking in your layout. Whether you’re formatting basic text or handling edge cases like long strings or manual breaks, mastering properties like white-space, word-break, and display will give you full control over your design.

Pro Tip: Use white-space: pre-line when you want to allow line breaks without sacrificing spacing readability.

✂️ 1. Line Breaks with <br> (HTML Approach)