I had a little situation where I had a header with a span in it, and I wanted to make sure to put a line break before the span. For the record, there really isn’t anything wrong with just chucking a
tag before it [and in fact the ability to show/hide that is very useful]. But… it always feels a little weird to have to use HTML to achieve a layout thing.
So let’s take a journey. A journey in which we say “But…” a lot.
Break right after this
and before this
A block level element would do it
Rather than a But we’re using a span on purpose, because of the design. The text after the break should be inline/inline-block, because it’s going to have a background and padding and such. It’s easy: But… the We can force that line
break to work by making white space meaningful… That actually works. But… because of the padding and background, it leaves a little chunk of that behind when the line breaks: We could
fix the awkward-left-edge-hugging on by using If
we made the span inline-block, the break would happen within that block, which isn’t what we want either: Making the pseudo element block-level and leaving the span alone doesn’t do the trick
either: This was Aaron Bushnell’s
idea. The trick here is to make the span block level, but then inject the text with a pseudo element and style it as an inline element. I’ve long been a fan of pseudo-element trickery, but this feels slightly dangerous in that you may be hurting accessibility. I think some screen readers read pseudo-elements, but I don’t think all, nor are they
supposed to. Not to mention you can’t copy and paste all the text this way. At least the text is still maintained entirely in the HTML! My favorite idea came from Thierry Koblentz. Just make the span Including one where we just use a See the Pen Attempting a line break before and inline-block within a header by Chris Coyier [@chriscoyier] on CodePen. Is it possible in pure css, that is without adding additional html tags, to make a line break like HTML CSS I have found many questions like this, but always with answers like "use display: block;", which I can't do, when the In this post, we'll explore various ways to create a line-break in our content using only CSS. We can display the line-breaks in text without adding any extra mark-up by using the Using either of these properties would make the element act like a
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
Mauris eget pellentesque lacus.
This does not work in IE-7 and below. 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: 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 You can add a new-line using the
Lorem ipsum dolor sit amet.Consectetur adipiscing elit.
The Hope you found
this post useful. It was published 15 May, 2018 [and was last revised 03 Jun, 2020]. Please show your love and support by sharing this post. , we could use a
You can insert line breaks via pseudo element
h2 span::before {
content: "\A";
}
is an inline element. The line break won’t do anything! Just like a real line break won’t do anything.
h2.two span::before {
content: "\A";
white-space: pre;
}
box-decoration-break: clone;
, but… that just leaves a bigger chunk up top:You could get a little weird and inject the actual text with a pseudo element
h2 span {
display: block;
}
h2 span::before {
content: attr[data-text];
background: black;
padding: 1px 8px;
}
Exploiting table layout
display: table;
and you’re done. It’s not tabular data of course, but that doesn’t matter. The fact you can force table layout from CSS is all about exploiting
the unique layout properties of table layout — not semantics.h2 span {
display: table;
}
Live Demos
, which is fine.
? I want the line break after the element, but not before:
Sub header
Text, text, text, text, text.
h4 {
display: inline;
}
must stay on the same line.
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
Line-Break Between Lines of Text
white-space
CSS property, with any one of the following values: white-space:
New linesSpaces & tabsText wrappingpre
Preserve
Preserve
No wrap
pre-wrap
Preserve
Preserve
Wrap
pre-line
Preserve
Collapse
Wrap
element [which preserves newlines], for example:
p { white-space: pre-line; }
Line-break Between HTML Elements
Set
display: block;
on the element:display: block
. Use the carriage return character [
\A
]
as content
in pseudo-element:::before
or ::after
pseudo-elements like so: span::before { content: '\A'; white-space: pre; }
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
. Can CSS force a line break after each word in an element?
How do you force a line break?
How do I break text to the next line in CSS?
How do you make the next line of an element?
element creates a line break. You can add it wherever you want text to end on the current line and resume on the next.Chủ Đề