Line break in html with `\n`


Translate

I feel like I'm asking a very noob question) Is there a way to make HTML properly treat \n line breaks? Or i have to replace them with <br/>?

https://jsfiddle.net/zawyatzt/



All Answers
  • Translate

    This is to show new line and return carriage in html, then you don't need to do it explicitly. You can do it in css by setting the white-space attribute pre-line value.

    <span style="white-space: pre-line">@Model.CommentText</span>
    

  • Translate

    You can use CSS white-space property for \n. You can also preserve the tabs as in \t.

    For line break \n:

    white-space: pre-line;
    

    For line break \n and tabs \t:

    white-space: pre-wrap;
    

    document.getElementById('just-line-break').innerHTML = 'Testing 1\nTesting 2\n\tNo tab';
    
    document.getElementById('line-break-and-tab').innerHTML = 'Testing 1\nTesting 2\n\tWith tab';
    #just-line-break {
      white-space: pre-line;
    }
    
    #line-break-and-tab {
      white-space: pre-wrap;
    }
    <div id="just-line-break"></div>
    
    <br/>
    
    <div id="line-break-and-tab"></div>

  • Translate

    As per your question, it can be done by various ways: - For example you can use:

    If you want to insert a new line in text area , you can try this:-

    &#10; Line Feed and &#13;Carriage return

    <textarea>Hello &#10;&#13;Stackoverflow</textarea>
    

    You can also <pre>---</pre> Preformatted text.

    <pre>
         This is Line1
         This is Line2
         This is Line3
    </pre>
    

    Or,you can use <p>----</p> Paragraph

    <p>This is Line1</p>
    
    <p>This is Line2</p>
    
    <p>This is Line3</p>
    

    Note: if you want to use \n you need to install a server like Xampp or Apache to support server side language


  • Translate

    you can use <pre> tag :

    <div class="text">
    <pre>
    abc
    def
    ghi
    </pre>
    </div>

  • Translate

    You could use the <pre> tag

    <div class="text">
    <pre>
      abc
      def
      ghi
    </pre>
      abc
      def
      ghi
    </div>

  • Translate

    You should consider replacing your line brakes with <br/>. In HTML a line break will only stand for new line in your code.

    Alternatively you can use some other HTML markups like placing your lines in paragraphs:

    <p>Sample line</p>
    <p>Another line</p>
    

    or other wrappers like for instance <div>sample</div> with css attribute: display: block.

    You can also use <pre>. The content of pre will have it's html styling ignored. In other words it will display pure html with normal \n brakelines


  • Translate

    Simple and linear:

     <p> my phrase is this..<br>
     the other line is this<br>
     the end is this other phrase..
     </p>
    

  • Translate

    Using white-space: pre-line allows you to input the text directly in the HTML with line breaks without having to use \n

    If you use the innerText property of the element via JavaScript on a non-pre element e.g. a <div>, the \n values will be replaced with <br> in the DOM by default

    • innerText: replaces \n with <br>
    • innerHTML, textContent: require the use of styling white-space

    It depends on how your applying the text, but there are a number of options

    const node = document.createElement('div');
    node.innerText = '\n Test \n One '