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:
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
.Use the carriage return character (
\A
) ascontent
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, settingdisplay: inline-block
would keep the text in the same line. For this to work, thedisplay
property should be set toinline
.
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.