How to Add a Line-Break to an HTML Element Using CSS Only?

In this post, we'll explore various ways to create a line-break in our content using only CSS.

Line-Break Between Lines of Text

We can display the line-breaks in text without adding any extra mark-up by using the white-space CSS property, with any one of the following values:

white-space:	New lines	Spaces & tabs	Text wrapping
pre	Preserve	Preserve	No wrap
pre-wrap	Preserve	Preserve	Wrap
pre-line	Preserve	Collapse	Wrap

Using either of these properties would make the element act like a <pre> element (which preserves newlines), for example:

p { white-space: pre-line; }

<!-- Sample Markup -->
<p>
    Lorem ipsum dolor sit amet. 
    Consectetur adipiscing elit. 
    Mauris eget pellentesque lacus.
</p>

This does not work in IE-7 and below.

Line-break Between HTML Elements

Block-level elements by default start on a new line (unless the default behavior is overridden by a CSS rule). To force inline elements to a new line, however, you could do any of the following:

1. Set display: block; on the element:

   This may be the most obvious one; a block-level element starts on a new line, and takes up the entire width available to it. So, you could either use a block-level element or set any HTML element's CSS property to display: block.

2. Use the carriage return character (\A) as content in pseudo-element:

   You can add a new-line using the ::before or ::after pseudo-elements like so:

   span::before { content: '\A'; white-space: pre; }
   

   <!-- Sample Markup -->
   <p>
       <span>Lorem ipsum dolor sit amet.</span><span>Consectetur adipiscing elit.</span>
   </p>
   

   The white-space property in this instance is important in order for this to work. Also note that, setting display: inline-block would keep the text in the same line. For this to work, the display property should be set to inline.