There are issues with all the wysiwyg editors out there. It’s a problem with Drupal too. It’s hard to make a browser-based tool that just works right.
What WordPress is trying to do is “clean” the code. 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 but they don’t show up.
TWO WORDPRESS LINE BREAK HACKS
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
Turn off all cleaning with this
But that’s an issue with existing posts so not a flexible solution
Or try out the ‘advanced’ editor:
http://wordpress.org/extend/plugins/tinymce-advanced
http://www.laptoptips.ca/projects/tinymce-advanced
This post is helpful:
http://blog.ironspider.ca/2008/05/02/plain-text-wordpress-look-ma-no-curly-quotes
And this gives way more options:
http://plugins.trac.wordpress.org/wiki/TextControl
It reminds me of the MoveableType editor.
This simple plugin lets you to easily create columns via a shortcode:
http://wordpress.org/extend/plugins/wp-post-columns
but it can be sensitive to extra spaces. And I find the final [end_columns] code is not needed. Watch out in some themes where other CSS can conflict with how these columns are built.
9 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.