Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS force new line

I have something like this:

<li>Post by <a>Author</a></li> 

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.

like image 761
Sebastian Starke Avatar asked Jul 18 '13 10:07

Sebastian Starke


People also ask

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.

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 I break text to the next line in CSS?

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.

How do you force a new line in HTML?

To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag.


2 Answers

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; } 
like image 179
Shiva Avula Avatar answered Sep 20 '22 11:09

Shiva Avula


How about with a :before pseudoelement:

a:before {   content: '\a';   white-space: pre; } 
like image 27
alxndr Avatar answered Sep 22 '22 11:09

alxndr