How to line-break from CSS, without using <br />?

Practical techniques for line breaks

Understanding white-space property values

white-space offers you a variety of options to manipulate text behavior:

• pre: Imagine this as keeping every single space and line break—very much like how your pet keeps all the toys you ever bought.
• pre-wrap: The perfect blend of pre and normal wrapping. Ideal when you want to retain formatting, but also prefer to keep it neat.
• nowrap: No breaks here, sir! Text lines remain straighter than an arrow's flight.
• normal: Collapses whitespace and adds line breaks as a convenience.
• inherit: When you want your CSS to follow parent's footsteps.

Tweak these white-space properties to fit the text flow and space requirements.

When display comes into play

Convert inline elements like <span> into block-level elements, and you've got line breaks! Magic? No, it's the power of display: block;.

.block-span {
  display: block; /* Look, ma, no <br>! */
}


In the land of responsive design: <br> and media queries

Control the appearance of <br> tags with media queries so your design is as flexible as a gymnast on an Olympic floor routine.

@media (max-width: 600px) {
  br {
    display: none; /* Obliviate! */
  }
}


Scripting line breaks with CSS content

The content property in pseudo-elements can open the doors to adding line breaks, no HTML needed, just like getting a backstage pass to your favorite concert.

.break-after::after {
  content: "\A"; /* \A - the secret handshake for line breaks */
  white-space: pre;
}


For more power, add attribute selectors to the mix:

[data-break]:after {
  content: attr(data-break) "\A"; /* Serving line breaks, hot and fresh! */
  white-space: pre;
}


Break-proofing text with  

Use the unbreakable space   to ensure your text is as solid as a rock band's bassline.

Visualisation

Here's how CSS line breaks work. Just imagine a train (🚂):

Train Route: ----🚂====🛤====🛤====🛤
Stations:     [Box 1]  [Box 2] [Box 3]

With white-space: pre-wrap;, the train makes a stop at every content box station:

.content-box {
  white-space: pre-wrap; /* All aboard the line break express! */
}


Result: Passengers (words) alight and start a new journey—on a new line! 🚂💭⏩🛤

Decluttering HTML for CSS prowess

Less is more, even in the world of markup. Fewer HTML elements equal a cleaner template for your CSS highlights to shine.

Writing in style with pseudo-elements

Use pseudo-elements (::before and ::after) to inject aesthetic line breaks into your content without any forgery—er, HTML.

.quote:before {
  content: "❝"; /* Proper quoting is très élégant */
}
.quote:after {
  content: "❞"; /* End quote, mic drop */
}


Pseudo-elements offer great ways to add visual breaks and structure to your prose, adding beauty to brains.

Real-life experimentation with jsfiddle

Remember: No amount of theory beats hands-on experience. See solutions like white-space and pseudo-elements in action on jsfiddle or similar platforms. It's the closest thing to a CSS sandbox.

References

1. word-break | CSS-Tricks — Deep dive into the word-break property.
2. line-break - CSS: Cascading Style Sheets | MDN — MDN sheds light on the CSS line-break property.
3. CSS word-wrap property — W3 Schools leads the way with practical examples using word-wrap.
4. Can I use... Support tables for HTML5, CSS3, etc — Quick, check if your CSS word-break property would impress or depress users!
5. Newest 'css+line-breaks' Questions - Stack Overflow — The Global Village of related CSS line-breaking discussions.
6. CSS white-space Property - CSS Portal — Where every space is a white space!