new line without
tag

后端 未结 4 1463
被撕碎了的回忆
被撕碎了的回忆 2021-02-07 00:46

Writing this html:

lorem ipsum
lorem ipsum
lorem ipsum

browser shows:

lorem ipsumlorem ipsumlorem ipsum

Is th

相关标签:
4条回答
  • 2021-02-07 00:54

    Html: You may wrap them in block elements like <div></div> or <h1></h1>

    Css: You may use white-space: pre-wrap;

    Js: You may use "replace" to change "\n" to <br/>

    0 讨论(0)
  • 2021-02-07 01:04

    You can use the <pre> tag to keep the line breaks.

    <pre>
    lorem ipsum
    lorem ipsum
    lorem ipsum
    </pre>
    

    The default style for pre tags is monospaced font, but that can be overriden.

    You can achieve the same effect without any extra default formatting using the white-space: pre CSS property.

    <div style="white-space: pre">
    lorem ipsum
    lorem ipsum
    lorem ipsum
    </div>
    

    There are several other values for white-space, but you should refer to the documentation to choose the most fitting one.

    Note that pre will treat every line break the same including the one following the <pre> or <div> tags. If you don't want them you will need to do:

    <div style=...>lorem ipsum
    lorem ipsum
    ...
    
    0 讨论(0)
  • 2021-02-07 01:14

    I would like to deliver some additional ways to achieve the OP's purpose. Yet, the direct answer for the title "new line without <br> tag" would be <pre> or white-space: pre-wrap; like the above.

    But,

    If I need 100000 lines of dummy lorem ipsum <br>, I would rather use emmet (which is built-in in VSCode) than write anything myself. ({lorem ipsum <br>}*100)*100

    Or, in case these 100000 short lines are predefined text, I can search and replace (Ctrl + H) with regex turned on, replace the regex $ (endline) with <br>.

    0 讨论(0)
  • 2021-02-07 01:14

    Yes, the right way to add breakpoints is to use white-space:pre in css styling sheet. like this

    <div style="white-space: pre"> 
           Enjoy the videos and music you love.
            Create your own business
            or entertainment channel 
        </div>
    
    0 讨论(0)
提交回复
热议问题