I have something like this:
Nội dung chính
- 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 line break in CSS?
- How do I force a new line?
- How do you force a new line in HTML?
- How do you make a new line in a div?
Post by Author
And I want to display the link in a new line, like this
Post by
Author
How can I achieve this? Clear:left doesn't work.
asked Jul 18, 2013 at 10:31
Sebastian StarkeSebastian Starke
5,0363 gold badges22 silver badges35 bronze badges
5
Use the display property
a{
display: block;
}
This will make the link to display in new line
If you want to remove list styling, use
li{
list-style: none;
}
Stephen P
14k2 gold badges43 silver badges65 bronze badges
answered Jul 18, 2013 at 10:37
Shiva AvulaShiva Avula
1,8161 gold badge19 silver badges28 bronze badges
2
How about with a :before
pseudoelement:
a:before {
content: '\a';
white-space: pre;
}
answered Apr 8, 2014 at 0:06
4
or you can use:
a {
display: inline-block;
}
answered Apr 22, 2014 at 10:21
Ya BashaYa Basha
1,8136 gold badges30 silver badges50 bronze badges
1
Use
OR
-
Post by
Author
OR
Post by
Author
or
make the a
element display:block;
Post by Author
Try
answered Jul 18, 2013 at 10:38
Ishan JainIshan Jain
7,8999 gold badges46 silver badges75 bronze badges
5
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:
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, settingdisplay: inline-block
would keep the text in the same line. For this to work, thedisplay
property should be set toinline
.
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 line break in CSS?
How to add a line-break using CSS.
Set the content property to "\a" [the new-line character]..
Set the white-space property to pre . This way, the browser will read every white-space, in myClass , as a white-space..
How do I force a new line?
Thankfully, there is a keyboard shortcut that moves to the next line. Move the text cursor to where you want the new line to begin, press the Enter key, hold down the Shift key, and then press Enter again.
How do you force a new line in HTML?
Adding line breaks in your HTML using the
tag is a simple way to make your text more readable. The
tag will insert a line break wherever you put it within your code.
How do you make a new line in a div?
The
HTML element produces a line break in text [carriage-return].