Hướng dẫn css force new line

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

    Hướng dẫn css force new line

    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:

    white-space:New linesSpaces & tabsText 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:

    1. 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.

    2. 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 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).