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 -->
    Lorem ipsum dolor sit amet. 
    Consectetur adipiscing elit. 
    Mauris eget pellentesque lacus.

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 -->
        <span>Lorem ipsum dolor sit amet.</span><span>Consectetur adipiscing elit.</span>

    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.

This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.