HTML Line Break & New Line Converter
Paste plain text and instantly get clean HTML with line breaks, paragraph tags, or modern CSS snippets. Runs 100% locally in your browser.
Zero HTML Tags Alternative
Prefer not to insert HTML tags into your content? Apply this CSS property to your container element instead. The browser will render plain text newlines natively.
.preserve-breaks {
white-space: pre-line;
}Core Fundamentals
What Is an HTML Line Break?
An HTML line break creates a single line break in text without starting a new paragraph. You create it in HTML using the <br> tag.
The <br> Tag Syntax
The <br> tag is an empty or void element in HTML. It has no closing tag and cannot contain child text or nested elements.
Whenever a browser parses a <br> tag, it immediately ends the current line and wraps subsequent content to the beginning of the next visual line.
<br> vs <br />: What's the Difference?
Both <br> and <br /> produce the identical result in all modern web browsers. Neither tag creates more spacing than the other.
In modern HTML5, <br> is the official standard syntax. The self-closing <br /> form is required when authoring XHTML, XML feeds, or writing components in React (JSX) where all void elements must explicitly close.
HTML Line Break Example
Line breaks are commonly used for addresses, poems, and lyrics where visual line breaks belong to the same logical thought.
<p>
123 Elm Street<br>
Suite 400<br>
Springfield, USA
</p>Suite 400
Springfield, USA
Semantic Comparison
<br> vs <p> vs CSS: Which Should You Use?
Use <p> for standalone paragraphs of body copy, <br> for line breaks within a single thought (like poems or addresses), and CSS white-space for raw user input.
| Method | Best for | Pros | Cons |
|---|---|---|---|
| <br> | Addresses, poems, compact text | Quick to insert; breaks lines immediately without extra margins | Poor semantics for paragraphs; can disrupt screen readers if overused |
| <p> | General body text, blog articles | Accessible; proper semantic structure; configurable spacing via CSS | Creates separate paragraphs; adds default browser margins |
| CSS white-space | Comments, user-submitted text | Zero HTML editing required; immune to HTML injection attacks | Affects entire container; requires CSS support |
When to Use <br>
Use <br> only when a line division is an essential part of the content itself. Good examples include street addresses, poetic stanzas, and song lyrics.
Never stack multiple <br><br> tags to fake spacing between paragraphs. Stacking break tags strips semantic structure and degrades accessibility for screen reader users.
When to Use <p>
Use <p> to structure text into semantic paragraphs. Browsers and screen readers understand that each paragraph represents a distinct thought.
Paragraph tags let you control layout and spacing globally across your website using CSS margin rules rather than manual break characters.
When to Use CSS white-space
Use CSS white-space: pre-line when displaying multiline text from databases, forms, or APIs. It automatically renders native \n newlines without parsing or injecting raw HTML tags into your DOM.
This approach prevents Cross-Site Scripting (XSS) risks because you display user input as plain text without using dangerous innerHTML methods.
<p>First idea introduced in paragraph one.</p>
<p>Second idea follows in paragraph two.</p>First idea introduced in paragraph one.
Second idea follows in paragraph two.
CSS Alternatives
HTML New Line Without <br>
You can create new lines in HTML without <br> by using the CSS white-space property or the HTML <pre> tag. Both instruct browsers to honor literal line breaks in your source text.
Using white-space: pre-line
The white-space: pre-line rule collapses consecutive spaces into a single space, but it honors literal newline characters.
It also wraps text automatically when a line reaches the container boundary. This property is ideal for displaying user-generated comments and product reviews.
Using white-space: pre-wrap
The white-space: pre-wrap rule preserves both literal newlines and all consecutive spaces or tabs.
Unlike pre-line, pre-wrap does not collapse multiple spaces. It still wraps lines normally to prevent horizontal scrollbars on smaller viewports.
The <pre> Tag
The <pre> element renders preformatted text in a monospace font by default. It displays every space, tab, and line break exactly as written in your HTML file.
Text inside a standard <pre> element will not wrap automatically. To enable text wrapping on small screens, add white-space: pre-wrap to its CSS.
<div style="white-space: pre-line;">
Line one of text.
Line two after pressing Enter.
</div>Troubleshooting Guide
Why Is My HTML Line Break Not Working?
HTML line breaks fail when developers rely on plain keyboard returns or string \n characters, which HTML parsers collapse into single spaces by default.
Why Pressing Enter Doesn't Create a New Line in HTML
Problem: You press Enter in your source code, but your text displays on one continuous horizontal line.
Reason: The HTML specification requires browsers to collapse all sequential whitespace characters into a single space.
Fix: Insert an explicit <br> tag at the end of the line, or wrap separate text thoughts into distinct <p> elements.
Textarea Text Showing on One Line
Problem: A user submits multiple paragraphs in a <textarea>, but your page renders the result as one unformatted block.
Reason: Textarea fields submit text with plain \n newline characters. Standard HTML display containers collapse \n into spaces.
Fix: Add the CSS style white-space: pre-line; to the output container, or convert newlines into <br> tags before rendering.
\n vs <br>
Problem: Passing \n from JavaScript or backend code prints literal characters or displays as a single space on web pages.
Reason: \n is a plain text control character interpreted by terminal consoles. Web browsers require HTML elements or CSS directives to break lines.
Fix: Replace \n with <br> using string replacement, or render inside an element styled with white-space: pre-line.
<!-- Fails: Enter key collapses -->
<div>Hello
World</div>
<!-- Fixed: Explicit <br> tag -->
<div>Hello<br>World</div>World
CMS & PLATFORMS
How to Add a Line Break in Different Platforms
Tested instructions and syntax for adding line breaks across major web tools and builders.
HTML Line Break in WordPress
In the WordPress Block Editor (Gutenberg), pressing Shift+Enter inserts a soft <br> line break inside an existing paragraph block. Pressing Enter alone creates a new separate paragraph block with default theme spacing. In the Classic Editor or Custom HTML block, you can type <br> or <br /> directly into the editor.
<!-- Shift+Enter in WordPress outputs a soft <br> break -->
<p>First line of content.<br>Second line within the same block.</p>BACKEND & PROGRAMMING
Convert Newlines to <br> in Code
Compare working implementations across languages using the same sample input "Hello\nWorld".
HTML Line Break in JavaScript
javascriptStandard Input: "Hello\nWorld"
const input = "Hello\nWorld";
const output = input.replace(/\r\n|\r|\n/g, '<br>');
console.log(output);
// Output: Hello<br>WorldFREQUENTLY ASKED QUESTIONS
Frequently Asked Questions
How do you add a line break in HTML?
You add a line break in HTML using the <br> tag. Place the <br> tag at the exact position where you want the line to end. It does not require a closing tag. Browsers immediately render the following content on a new line without adding paragraph margins.
What is the difference between <br> and <br />?
There is no functional difference between <br> and <br /> in modern web browsers. In HTML5, <br> is the official standard. The self-closing <br /> syntax is required in XML-based formats such as XHTML and React JSX. Both render an identical line break on screen.
How do you make a new line in HTML without <br>?
You can create a new line in HTML without <br> by styling your element with CSS white-space: pre-line;. This tells browsers to honor literal newlines in your text. Alternatively, you can wrap lines in <p> tags, use CSS block displays, or place text inside <pre> tags.
How do you add a line break inside a paragraph?
You add a line break inside a paragraph by placing a <br> tag directly within the <p> container. This breaks the line immediately while keeping all text inside the same semantic paragraph. It is ideal for multi-line quotes, street addresses, or poetic stanzas without creating extra paragraph margins.
How do you add a new line in an HTML table cell?
You add a new line inside a table cell by inserting <br> tags between the lines of text inside the <td> or <th> element. Alternatively, apply the CSS property white-space: pre-line; to the cell style. This allows multiline text to flow naturally within structured tabular columns.
How do you add a new line after an image?
You add a new line after an image by placing a <br> tag immediately after the <img> tag, or by styling the image with display: block;. Because <img> elements are inline by default, following text sits beside them unless you force a break or change display mode.
Does create a line break?
No, does not create a line break. It represents a non-breaking space, which prevents browsers from breaking lines at that specific point. It is used to keep words together, such as dates or numbers and units. To create an actual line break, you must use the <br> tag.
How do you show textarea newlines in HTML?
You show textarea newlines in HTML by applying the CSS rule white-space: pre-line; to the container where user text is displayed. Alternatively, convert literal \n characters into HTML <br> tags before rendering. Without one of these methods, HTML parsers collapse all textarea newlines into single spaces.
Does <br> affect accessibility?
Yes, overusing <br> tags can negatively affect accessibility for users with screen readers. Screen readers pause naturally at paragraph <p> boundaries, but multiple consecutive <br> tags can cause stuttered, unnatural voice synthesis. Use <br> only for addresses and poems, and use <p> for distinct thoughts.
Does this tool store my text?
No, this tool never stores, uploads, or logs your text. All conversion operations run 100% locally inside your web browser using client-side JavaScript. Nothing you paste or type is ever transmitted to a server or saved to any database, ensuring complete privacy for sensitive code and documents.