How To Add Line Breaks or New Paragraphs In TinyMCE, WordPress and WebYep
June 30th, 2008
I’ve had a few clients ask me this question, so I’m posting the answer here – because it wasn’t super easy to find on the internet. When you get to the end of a line and hit “return” on your keyboard – what do you want to happen? Sometimes you want a new paragraph. Sometimes you might just want a line break. This short tutorial shows you how to accomplish this. It works for WebYep and WordPress…and probably for many other text editors that might use TinyMCE or FCKEditor or others.
In HTML, there are paragraph tags: <p>I’m a paragraph</p> and there are line breaks <br />.
Paragraph tags make things look like this:
Paragraph 1
Paragraph 2
There’s a line of space between paragraphs.
But line breaks look like this:
Line break 1
Line break 2
There is no line of space.
How do you get what you want when you’re using WebYep or WordPress or some other application that uses a WYSIWYG text editor?
The answer is easy: If you want a new paragraph, simply hit “return“. If you don’t want a new paragraph and just want a line break, hit “shift return“.
Now, when I was researching this solution, I did find many folks who said you could accomplish this by changing a few lines of code in the TinyMCE initiation file. And this did work…but only on Internet Explorer. It didn’t work on Firefox. So I think the simple “shift return” solution is the best one for my clients to use.
UPDATE: For those of you on a Mac, I have found issues with Safari and this hint – but it works on Firefox for Mac, so give that a try if Safari doesn’t behave.
Jill--------------
J. Olkoski
Aldebaran Web Design, Seattle
Jill Olkoski has a BS in Engineering, a BS in Computer Science and an MA in Clinical Psychology. She delights in using her advanced technical and psychological skills to help small business owners develop cost-effective and successful websites.
January 23rd, 2009 at 2:11 pm
You forgot to mention what to do if you’re trying to get extra space between paragraphs. Using extra P and BR tags doesn’t work because WordPress strips them out. I figured out a way to make it work and I posted a tutorial here:
http://tystips.com/archives/54/how2-insert-space-between-paragraphs-in-wordpress-without-using-br-and-p-tags/
I hope this helps your readers. Thanks!
April 15th, 2009 at 9:53 am
Hello. I found out a simple but outstanding solution here: http://www.picker.it/tricks/space-between-paragraphs-in-wordpress.html
You won’t need to use any code (after you’ve made a simple change to your CSS file): just press Enter in the visual view, and you’re done.
June 26th, 2009 at 8:32 pm
exactly what I was looking for. thank you so much!
June 27th, 2009 at 1:02 pm
Hi John,
You’re very welcome, happy to help!
December 21st, 2009 at 4:11 pm
Great success using:
you have to set it per line
for instance you can’t do
and expect 2 breaks, if you want 2 breaks you need to do this….
game over!
March 2nd, 2010 at 9:54 pm
This is a great trick. I’ve been looking for something like this for 2 years. Thanks
March 28th, 2011 at 11:17 am
Wow! Simple and clean. You are my hero man!
Thank you very much!
March 28th, 2011 at 11:21 am
Thanks for leaving a comment Novic – it’s always a nice feeling to be helpful to someone.
May 17th, 2011 at 8:45 am
Geez. Something so simple that I spent way too much time looking into hack to fix. Thanks for the post, what a time saver this will be. 🙂
May 24th, 2012 at 7:19 am
thanks
July 21st, 2013 at 10:00 pm
Thanks. Had been looking for a solution for quite some time. Never thought it could be “built-in”. thanks once again.