I have something like this:
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
] 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; }
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 do I force a new line?
How do you force a new line in HTML?
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?
HTML element produces a line break in text [carriage-return].