Seattle Web Design
Blog > How To Add Line Breaks or New Paragraphs In TinyMCE, WordPress and WebYep

Meet the author:
Jill Olkoski

Jill has a MA in Clinical Psychology, a BS in Computer Science, and a BS in Mechanical Engineering.

She currently owns Aldebaran Web Design in Edmonds (near Seattle WA) and enjoys educating her clients on topics related to small business website design.

In Jill's previous life, she spent 17 years in the engineering and quality organizations of a Fortune 100 tech company.

 


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.



11 Responses to “How To Add Line Breaks or New Paragraphs In TinyMCE, WordPress and WebYep”

  1. Tyler Says:

    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!

  2. Jack Says:

    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.

  3. John Knotts Says:

    exactly what I was looking for. thank you so much!

  4. Jill Olkoski Says:

    Hi John,
    You’re very welcome, happy to help!

  5. Ryan Says:

    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!

  6. Erik Says:

    This is a great trick. I’ve been looking for something like this for 2 years. Thanks

  7. novic Says:

    Wow! Simple and clean. You are my hero man!
    Thank you very much!

  8. Jill Olkoski Says:

    Thanks for leaving a comment Novic – it’s always a nice feeling to be helpful to someone.

  9. Kelly D Says:

    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. 🙂

  10. Will Says:

    thanks

  11. Vinay Says:

    Thanks. Had been looking for a solution for quite some time. Never thought it could be “built-in”. thanks once again.



 ©2006 - © Aldebaran Web Design Seattle, A DBA of Aldebaran Services LLC
Blog Email Subscription:
Search Blog Articles: