How To Add A Line-break To An HTML Element Using CSS Only?

Learn various ways a line-break can be added using CSS only

  • By Daniyal Hamid
  • May 15, 2018
  • Comments
In This Article

Today 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.