WordPress Line Break not Working: Quick Solutions to Keep Text Formatting Intact

WordPress line break not working is a common issue faced by users. Are you struggling to get your formatting to work properly in WordPress? Want to add some extra spacing to your post, then using line breaks in WordPress can be of help. Let us look at some neat tips and tricks to get you around this known issue in WordPress.

WordPress visual editor offers is great for writing content quickly and also makes sure the formatting is exactly how you require it. However, some users prefer third-party solutions, like MS Word or Google Docs. The issue with these is that they introduce problems when pasting content directly into a WordPress post.

Also, with the WordPress upgrade to version 3.2, the text editor seems to remove the line break
tag by itself. While typing text into the text editor, the formatting is in place and all line breaks are shown in the preview also. However, all the paragraph and line break tags seem to disappear when the text is saved and you go and view the page. WordPress simply strips out the relevant tags whenever you add extra spacing in the text editor. The result is that the properly formatted text page you created looks totally different when you save it since all extra spacing or blank lines are removed.

So, if WordPress post format is not showing properly or the same as original document. Then you need to fix this problem. So in this post, we will look into solutions that can help you fix ‘WordPress line break not working’ issue.

Here at TemplateToaster WordPress website builder, let us look at the issue with an example post with three lines and multiple line spacing.

New Post in Text Editor

Published Post in WordPress

Many WordPress users struggle around this issue of WordPress line break not working. In this article, we discuss some of the possible ways to get around this issue.

1. Use empty classes in HTML Elements

You can make WordPress assume that your HTML elements contain certain attributes. This can be done by Adding attributes to the HTML elements with the use of empty classes. For example:

Avoid writing:

<p>
<br>
<span>

Instead, write:

<p class="">
<br class="">
<span class="">

2. Disable Autop formatting

The Autop() function in WordPress auto formats the paragraphs. The WordPress line break not working is due to the presence of a filter called “wpautop”. The “wpautop” filter executes whenever the content of a blog post is rendered.

We can easily use the remove_filter function to disable the wpautop filter. In the functions.php file you need to add the following code:

remove_filter ('the_content', 'wpautop');

If you use multiple themes, then you need to add this functionality as a plugin. You can place the code within a PHP file inside the /wp-content/plugins directory.

Published Post after Autop disabling

3. HTML br tag not working: Use WordPress Formatting Plugin

• TinyMCE Advanced Plugin

WordPress has a built-in editor known as the “Visual” editor. At the backend, the editor uses open source editor named “TinyMCE”. If you switch between the Visual Editor and the HTML(Text) editor, the TinyMCE functionality executes a backend filtration process. During this process, the empty tags and the <br/> tags are removed from the post.

The TinyMCE-Advanced plugin adds the option to disable the automatic removal of <p> and <br/> tags. The option to disable/enable WordPress line break is present in the Settings->TinyMCE Advanced panel.

Edit Post in Visual Editor without TinyMCE Advanced Plugin installed

Edit Post in Visual Editor with TinyMCE Advanced Plugin installed and disabled auto removal of tags:

• Use wp-Typography

wp-Typography is a powerful WordPress plugin that helps with advanced formatting with any need for CSS coding. It comes with many customization options including space control, intelligent character replacement, CSS hooks for styling, hyphenation, and more. Thus, wp-Typography allows you to seamlessly format the text into a more appealing and readable typography simply by typing or pasting it in the WordPress editor.

Main Highlights:

• Easily add hyphenation, which supports over 70 languages.
• Automatically change characters with correct options, including quote marks, dashes, fractions, math symbols, ordinal suffixes etc.
• Manage spacing by allowing wrapping after hard hyphens, and more.
• Add CSS hooks for styling like uppercase words, numbers, ampersands, etc.

4. Work with the HTML Editor

This is an easy solution for people who are familiar with HTML. You can avoid working with the Visual editor and switch to the HTML mode in the WordPress editor. The HTML mode lets you control the output and allows you to add or remove line breaks. Just use the <br/> tag wherever you want a line break inserted.

5. Add a filter to replace <br/> tag

Add a filter in the functions.php file which adds a clear attribute to the <br/> tag. When the attribute is added, the <br/> tag is not removed by WordPress.

function clear_br($content) { 
return str_replace("<br/>","<br clear='none'/>", $content);
} 
add_filter('the_content','clear_br');

Post before adding filter

Published post after adding filter

6. Create a WordPress Line Break (br) Shortcode

You can add a shortcode to fix the line breaks not working issue in WordPress.

Insert the following shortcode code into the functions.php file:

function add_linebreak_shortcode() {
return '<br />';
}
add_shortcode('br', 'add_linebreak_shortcode' );

Now insert the shortcode shown below wherever you want to insert a space.

[br]

Adding Shortcode in Text Editor

Edit Post in Visual Editor

Published Post after Adding Shortcode

7. HTML Br tag not working – Use CSS

Some developers believe <br/> tags should not be used for styling pages. HTML is a semantic language, not to be used for defining positioning, styling or layout information. Use CSS to generate the style or size of paragraph margins using stylesheets. If you have basic knowledge of CSS, then all you need to add paragraph spaces is add a bottom margin to the <p> tag for the paragraph.

1. Open the WP admin panel.
2. Select Appearance > Editor.
3. Select the file style.css file on the right side. Locate the <p> tag in the style.css file.
   Add the following lines to add gaps above and below the paragraph:

   padding-top:1.0em;
   
   padding-bottom:1.0em;

   Example:

   p {
   margin: 0 0 1.5em;
   }

   After adding those two lines, it will look like this:

   p {
   margin: 0 0 1.5em;
   padding-top:1.0em;
   padding-bottom:1.0em;
   }

4. Save the file.

All paragraphs get a space above and below. Note that this would add the same amount of space above and below all paragraphs.

Word Line Break Not Working Error on WordPress

Spacing or line break errors may occur when you paste content on WordPress text editor from third-party editors. It is quite common and happens while shifting content from one program to the other. While you can manually edit the error in the text editor of WordPress, this method is quite time-consuming. So here is what else you can do”

• Click on the visual editor toolbar toggle, this shall show additional formatting options.
• Now, highlight all of the content or the one that is showing spacing or line break issues.
• Then click on the clear formatting button.

Now this should remove rogue <span> tags and should also fix any spacing or line break WordPress error. The only problem with this method is that it may not show all of the errors. So make sure to check the text editor to make sure there are no more line break errors in the content.

Final Thoughts

Based on your skills you can choose the above-mentioned methods to fix WordPress line break issue. You can go through all of these methods as there is always something to learn, and likewise you can manage formatting properly. As seen solving the line break issue on WordPress is easy, and you can do it on your own.

WordPress line break not working is a known issue and we must live with it. Since the processing of line breaks is added by WordPress we cannot expect it to change the way it works. We can only use workarounds or alternate methods to suppress the behavior. You can also look at TemplateToaster, a website builder and WordPress theme maker as a tool for creating elegant WordPress websites without getting into the details WordPress. TemplateToaster web design software comes with a range of advanced themes and plugins which you can use with ease and flexibility. Using this tool would surely provide you with an effortless mechanism for creating advanced WordPress websites without delving into unnecessary details.

Hopefully, these methods will help you fix the spacing or line break issue on WordPress easily. However, if you still have any questions feel free to write it in the comment section below, so I can help you with the same.