Line break in HTML with '\n'

Space matters: Use of white-space in CSS

Maintain \n as a line break in HTML using white-space CSS property of your element. Applying style="white-space: pre-line" treats \n as a newline.

<div style="white-space: pre-line;">First line.\nSecond line.</div>


The result: newline preserved. First line. Second line.

Line break alternatives across HTML, CSS, JavaScript

JavaScript and innerText

In JavaScript, manipulate the innerText attribute of a DOM element - it interprets \n as a break.

// JavaScript "seeing" line breaks... magic or logic? You decide.
document.getElementById('myElement').innerText = "First line.\nSecond line.";


HTML <pre> tag

Opt for <pre>, the Hulk of HTML that respects both line breaks and spaces in your code. No CSS needed.

<pre>Description.\nThis tag is impressive, right?</pre>


Manually replacing newline characters

If CSS and JavaScript took a day off, replace newline characters with <br> directly in your HTML.

// Handle with care: old-school line breaks incoming!
const withLineBreaks = myString.replace(/\n/g, '<br>');


Managing text formatting for form inputs

Covering textarea

For textarea that involves line breaks, resort to encoded characters 
 or 
 for line breaks.

<!-- When in a textarea, "\n" speaks in codes. -->
<textarea>Line 1&#10;Line 2</textarea>


Advanced maneuvers: Text formatting

Respecting tabs and line breaks

Achieve nirvana in text formating. white-space: pre-wrap respects newline (\n) and tab (\t) both.

<div style="white-space: pre-wrap;">First line.\n\tSecond line with a tab punch.</div>


Playing with textContent or innerHTML

Pair textContent or innerHTML with white-space CSS styling. This dynamic duo infuses your JavaScript with superpowers for line breaks manipulation.

// Will the real Slim Shady please stand up... with line breaks.
const div = document.createElement('div');
div.textContent = 'Dear Slim,\nI wrote you, but you still ain\'t calling.';
div.style.whiteSpace = 'pre-line';
document.body.appendChild(div);


Structuring your HTML content: Power of paragraphs

Breaking text into paragraphs

Embrace <p> for larger content sections. No need to sprinkle <br> for separations, create distinct paragraphs and let HTML breathe.

<!-- Walls of text? No, thanks. Say hello to paragraphs -->
<p>Wall.1</p>
<p>Wall.2</p>


Prioritizing legibility

Make thoughts, not lines. Use <pre> or assign innerText while embedding preformatted text within a <div>. It keeps your HTML clean, and readers happy.