There are issues with all the WYSIWYG (What You See Is What You Get) editors out there. It’s hard to make a browser-based tool that just works right. Over the years these tools have gotten better and require fewer “hacks” to get them to display what you want them to display.
The intutiive solution is to just add more blank lines (carriage returns, to use a typewriter term). But it doesn’t work — WordPress is trying to “clean” the code and this is useful in many situations but not always.
First: remember that you can always get less space by using “shift” with the “return” (or “enter”) key. that will give you one line break as opposed to a paragraph space.
But what many WordPress users find is that they add a few extra line breaks to add vertical space between sections of content but the spaces don’t show up on the public facing page.
FOR CURRENT “GUTENBERG” WORDPRESS BLOCK EDITOR
Adding some extra space is easy—use the block called Spacer. Click on the + icon, search for “spacer”, then add the Spacer block. By default, the space will be set at 100 pixels in height.
click the image below to see in more detail the block options.
TWO WORDPRESS LINE BREAK HACKS
For older versions of WordPress
Insert this in HTML mode to create line break that survives WP “cleaner” (look at html): <div style="margin-bottom:2em;"><span style="display:none;">.</span></div>
Adjust “size” of line break via “margin” CSS tag.
This line has 2em set above it – just to prove the code above works! Make sure you don’t paste in curly/smart quotes.
OR if you just want one line break add <code><br ></code>
. Note that this gets ‘cleaned’ whenever you switch from visual to html mode but it still works after the “br” part gets cleaned out. Again, you will see extra lines above this sentence.
PLUG-IN METHODS FOR LINE BREAKS
- Disable Visual Editor WYSIWYG: Adds a button in editor to disable the visual editor for that particular page/post. That gives you flexibility to add code but of course you lose the power of the visual editor.
- Or try out the Advanced Editor Tools (previously TinyMCE Advanced): http://wordpress.org or http://www.laptoptips.ca
- And TextControl gives way more options — It reminds me of the MoveableType editor from way back when but I have not used it.
Originally published 2009, Updated 2013 and 2021
21 Comments
You, sir, are my hero. Thank you.
I hope you do not mind if I posted a link on digg
Thank you so much! TinyMCE Advanced is EXACTLY what I needed to resolve the problem!!
Awesome code stylie…thanks
Works great, but how can we go about incorporating directly into the style sheet so we don’t have to drop the code in the html view every time we want a line break?
You’d have to add a style to your stylesheet and make reference to it. One trick i use is to take advantage one of the unused h4, h5 or h6 tags since they are in the default editor. Then they can be applied to some text just to add extra space below it.
Is this what you’re trying to do?
http://www.theblogaholic.com/2011/01/16/add-line-breaks-in-wordpress-posts/
thank you very much, really grateful.
Your tip is still working 2 years later! Thanks a whole heap.
Brilliant! Thank you.
Worked in 2013! Thank you.
Perfect! This has been an issue for a while, but it looks like this will do the trick
Just used this solution for adding extra lines in wordpress it is still working fine. Many other solutions don’t work anymore but this one does. Wish wordpress would address this. You are a life saver. thx
My hero! Thanks so much. I’ve made a TextExpander snippet of the code! Works like a charm.
Very helpful, thanks!
Your code still works! In my case, I just wanted to place a BannerZest Gallery at the bottom of the page and it worked just fine. Thank s a lot!
Thanks! Very helpful.
That code for adding extra vertical space rocks!
A hero indeed! Couldn’t find the right code all night until I came across your page. Thanks!
gooood. Thank you!
PLS I NEED HELP WITH THIS WITH THIS LITTLE ISSUE AM HAVING.
WOOCOMMERCE USE TO ADD EXTRA LINES ON MY URL PLS DO U HAVE ANY IDEA HO I CAN STOP IT
THIS IS AN EXAMPLE OF WHAT AM SAYING shekinamediahouse [DOT] com/?v=bf7410a9ee72
I WANT THIS( ?v=bf7410a9ee72) TO STOP SHOWING ON MY URL