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.

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.