Need help? Check out our Support site, then


Text editor adds empty paragraphs

  1. When I enter the following code into the text editor and save, the resulting code looks different. That's so annoying.

    Code I enter:

    <div>
      <a href="#">Link1</a>
      <a href="#">Link2</a>
      <div>Sample text</div>
    </div>

    Code I get:

    <div>
      <a href="#">Link1</a>
      <br>
      <a href="#">Link2</a>
      <p></p>
      <div>Sample text</div>
    </div>

    Where do these br and the empty p tag come from? I haven't asked for them. Why can't the text editor just return the code I entered? What's the point of a html/text editor when it changes the code at its own discretion?

    Can I do something to get rid of the these tags? What do I have to enter in the textfield to not get empty p-tags? Is there some kind of workaround?

    The blog I need help with is iqatrophie.wordpress.com.

  2. Hi Martin,

    I just created the exact same text which you did by creating the text in the Text Editor (rather than the Visual Editor, which appears to be what you are talking about) and none of my code was modified by the insertion of additional breaks or empty paragraphs either when I saved it nor when I published it.

    Usually extra tags are added when working in the Visual Editor. If you'd rather not have them added, it is best to work in the Text Editor, where no additional tags should be inserted except what you've put in yourself.

  3. I've entered the code in the text editor. I say so in the first line of my post.

    When I enter the following code into the text editor ...

    I've published a sample text on my test blog. If you check the source code, it'll look like this:

    <div>
      <a href="#">Link1</a><br />
      <a href="#">Link2</a></p>
    <div>Sample text</div>
    </div>

    According to the source code view by Firefox 24.0 it's only one closing p-tag. Looks like Firebug (Firefox Addon) completes the code with a opening p-tag on its own. Nevertheless the closing p tag as well as the line break have been inserted by some magical process.

    The problem is the empty p tag which influences the spacing between the neighbouring html elements.

  4. While the text editor does enter most of the code as it is written, it does its best to maintain the formatting which you have created.

    In short, if you have put one line of text below another using a hard return, the editor will try to translate that into one line of text being below another when it is displayed online. As you are aware, that requires the insertion of a line break.

    You can try using one of the tags which displays text "as is," such as the "pre" or "code" tag. This should allow your code to be displayed without any line breaks.

  5. So the text editor is in fact adding elements I didn't enter in the first place. I conclude, the text editor is not a real HTML editor then, isn't it?

    Unfortunately the "pre" or "code" tag is not an option because I'm not trying to display some code but would like the code to work. I'm currently messing around with html and css to find a solution for a nice spoiler tag for WordPress.com (due to a question in the german forum).

    Because of the editor adding line breaks and empty paragraphs, the code wouldn't work or show some weird spacing between anchor and div tag. I'm currently working around the problem with

    .sp_simple_hide + p:empty {
        display: none;
    }

    but would prefer the text editor wouldn't add these unwanted tags in the first place.

  6. That is correct, the text editor is not a strict HTML editor. Since it is designed to translate what is being entered into something which is being displayed online, it has to have logic applied to what is entered.

  7. a) When you enter line or paragraph breaks, you get br and p tags in the sourcecode; the so-called text editor simply hides them from view, to avoid unnecessary clutter. (So the br tag you're complaining about is normal.)
    b) I don't know why you have added the div tags; I guess you need them to add classes or other attributes. If so, to avoid the unwanted paragraph break enclose "Sample text" in span tags instead of div tags.

  8. Hi Panos,

    b) You're right. I used the div tag to make the spoiler text as flexible as possible. That's why I thought a block element like a div tag might be the best. I think I'll give it a try with span tags. :)

  9. If you find that div tags would work best, just make sure the links are enclosed in a properly opened and closed paragraph, and eliminate the bottom margin of that paragraph. For a text-editor-only solution, that would be:

    <div>
    <p style="margin-bottom:0;">
    LINK1 CODE
    LINK2 CODE
    </p>
    <div>Sample text</div>
    </div>

    If you have the Custom Design upgrade, and you're going to use this more than once, you can write this in the text editor:

    <div class="whatever">
    <p>
    LINK1 CODE
    LINK2 CODE
    </p>
    <div>Sample text</div>
    </div>

    and this in the CSS editor:

    .whatever p {
    margin-bottom: 0;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic