What are Line Breaks? Learn how to add and remove them

The last thing you want in HTML is hidden tags frustrating your users. Too much whitespace, unexpected spaces, or inconsistent formatting can break workflow concentration, and make them feel like they’ve lost control over their content. Similarly, the inability to add intentional line spaces in a text area can frustrate users' ability to format their content as they need. To fix this, you have two options as a developer: either manually adjust your textarea to handle line breaks, or save time with a rich text editor like TinyMCE. With just a few lines of JavaScript, TinyMCE gives you built-in options to easily manage and customize line breaks.

What are line breaks?

In HTML, line breaks can be created using the   tag for single breaks or the  tag for new paragraphs.   creates a new line without extra spacing, while  adds semantic structure and spacing between blocks of text.

Why line breaks matter

Using line breaks with intention can boost readability, maintain clean formatting, and help your users' content appear just as they intend, especially across various screen sizes. When you’re working with HTML, line breaks help you avoid unwanted white space and ensure the content is as polished as possible.

This is a critical feature for documentation both in business apps and educational tools. Distinguishing between different pieces of information or different sections is an important part of organizing content. Users in all kinds of applications need line break capability in their rich text editing experience.

How to add line breaks in HTML

Adding line breaks in HTML is easy with the   tag. Here’s a simple example:

This is the first line.<br>This is the second line.

And in TinyMCE, pressing Shift + Enter works the same way as adding   in HTML, moving the text to a new line without creating a paragraph block.

Managing line breaks in TinyMCE

TinyMCE offers flexible configuration options for handling line breaks. Here’s how you can fine-tune your setup:

Step 1: Set up your HTML file

To set up this file, you will:

Create an HTML file called index.html
Copy and paste this TinyMCE configuration with the following settings for line breaks:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Line Breaks Demo</title>
  <!-- Replace 'no-api-key' in the link below with your API key -->
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
    referrerpolicy="origin"></script>
</head>

<body>
  <textarea id="editor">Type some text and press "Enter" to see TinyMCE's line breaks in action.</textarea>
  <script>
    tinymce.init({
      selector: '#editor',
      plugins: 'lists link image table code help wordcount',
      toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent',
      newline_behavior: 'linebreak', // Makes Enter insert a <br> instead of a new paragraph
      remove_trailing_brs: true   // Keeps any trailing <br> tags intact
    });
  </script>
</body>
</html>

👉 Replace “no-api-key” with a real TinyMCE API key. If you don’t have one already, you can get a free API key with a 14-day trial of TinyMCE in just a minute.

Here are the settings we used in the editor configuration:

newline_behavior: 'linebreak' - This way, Enter adds a   tag, keeping your content tidy.
remove_trailing_brs: true - Automatically removes any extra   tags at the end of lines, keeping your HTML output as clean as possible.

Line break options

It’s possible to customize TinyMCE’s behavior for   tags. You can choose how you want the RTE to behave based on the newline_behavior and remove_trailing_brs options.

Feature	Type	Option	Purpose
`newline_behavior`	String	default	Inserts a block on Enter, and a br tag on Shift+Enter.
		block	Forces the default Enter br tag behavior in all cases.
		linebreak	Forces the default Shift+Enter br tag behavior in all cases.
		invert	Inverts the default line break behavior for both Enter and Shift+Enter actions.
`remove_trailing_brs`	Boolean	true	Disables TinyMCE’s default behavior, which is to remove <br> tags at the end of block elements.
		false	Ensures that TinyMCE removes any trailing <br> tags at the end of block elements.

If you want to read more about these options, visit the TinyMCE documentation for newline_behavior and remove_trailing_brs for more detailed technical specs.

Step 2: Test your setup

To see how this configuration works inside TinyMCE, you’ll need to use http-server. Here’s a quick way to set it up if you don’t already have it installed:

Install Node.js from nodejs.org
Install http-server by running:

npm install -g http-server

To start your rich text editor demo and run TinyMCE locally, you’ll navigate to your project folder in Terminal and run these two commands:

npm i
http-server

This will launch the app you built inside index.html in your local browser. Just go to http://localhost:8080/ to see your app and try out some line breaks! As you type in the editor and press "Enter," you’ll see how TinyMCE handles line breaks.

Preserving line breaks in the editor

Want to make sure TinyMCE keeps every line break you add? By configuring it to preserve   tags, you can ensure that line breaks are reflected in your HTML output just as they appear in the editor.

tinymce.init({
  selector: "#editor",
  plugins: "lists link image table code help wordcount",
  toolbar:
    "undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent",
  newline_behavior: "linebreak",
  remove_trailing_brs: false, // Removes any trailing <br> tags
});

To configure TinyMCE to retain   tags directly in the editor, all you have to do is change the remove_trailing_brs option to false.

What’s next?

By mastering line breaks, you’re already on your way to creating a cleaner, more flexible text layout in TinyMCE. Ready to dive deeper? These settings are just the beginning of what TinyMCE can do! Learn more and try another plugin of your choice in a few minutes:

What are Line Breaks? Learn How to Add and Remove Them