Css break line after element

Question

Is it possible in pure css, that is without adding additional html tags, to make a line break like ? I want the line break after the

element, but not before:

Nội dung chính Show

A block level element would do it
You can insert line breaks via pseudo element
You could get a little weird and inject the actual text with a pseudo element
Exploiting table layout
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
Line-break Between HTML Elements
Set display: block; on the element:
Use the carriage return character (\A) as content in pseudo-element:
How do I force a new line in CSS?
Can CSS force a line break after each word in an element?
How do you make the next line of an element?
How do you force a line break?

HTML


  Text, text, text, text, text. Sub header
  Text, text, text, text, text.

CSS

h4 {
  display: inline;
}

I have found many questions like this, but always with answers like "use display: block;", which I can't do, when the

must stay on the same line.

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 , we could use a

, and we’ll get that break just by virtue of the div being a block-level element.

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.

You can insert line breaks via pseudo element

It’s easy:

h2 span::before {
  content: "\A";
}

But… the is an inline element. The line break won’t do anything! Just like a real line break won’t do anything.

We can force that line break to work by making white space meaningful…

h2.two span::before {
  content: "\A";
  white-space: pre;
}

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 box-decoration-break: clone;, but… that just leaves a bigger chunk up top:

box-decoration-break is great for some issues, but not this one.

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:

You could get a little weird and inject the actual text with a pseudo element

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.

h2 span {
  display: block;
}
h2 span::before {
  content: attr(data-text);
  background: black;
  padding: 1px 8px;
}

It works! But…

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!

Exploiting table layout

My favorite idea came from Thierry Koblentz. Just make the span 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

Including one where we just use a , which is fine.

See the Pen Attempting a line break before and inline-block within a header by Chris Coyier (@chriscoyier) on CodePen.

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

03 Jun, 2020
2 min read

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

element (which preserves newlines), for example:

p { white-space: pre-line; }

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:

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) 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; }
```
```
    Lorem ipsum dolor sit amet.Consectetur adipiscing elit.
```
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 15 May, 2018 (and was last revised 03 Jun, 2020). Please show your love and support by sharing this post.

Frontend
CSS
Web Development

How do I force a new line in CSS?

There are two methods to force inline elements to add new line. Using display property: A block-level element starts on a new line, and takes up the entire width available to it. Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements.

Can CSS force a line break after each word in an element?

The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen. If we then set the width of the text to one em , the word will break by each letter: HTML.

How do you make the next line of an element?

In HTML, the
element creates a line break. You can add it wherever you want text to end on the current line and resume on the next.

How do you force a line break?

Press ALT+ENTER to insert the line break.

programming css Break line HTML Break-after CSS Overflow-wrap Word-break CSS

Css break line after element

Sub header

Break right after this and before this

A block level element would do it

You can insert line breaks via pseudo element

You could get a little weird and inject the actual text with a pseudo element

Exploiting table layout

Live Demos

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

Line-break Between HTML Elements

Set display: block; on the element:

Use the carriage return character (\A) as content in pseudo-element:

How do I force a new line in CSS?

Can CSS force a line break after each word in an element?

How do you make the next line of an element?

How do you force a line break?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội