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.


Hope you found this post useful. It was published (and was last revised ). Please show your love and support by sharing this post.