WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Struggling to remove line breaks from tags (2 posts)

  1. Ricter
    Member
    Posted 1 year ago #

    I'm trying to display content on a page in div tags. Using some Javascript has allowed me to put them in "spoiler" blocks. But the div tags are managing to have 2 line breaks before them, and I want none.

    The [+] symbols, ideally, would be adjacent to the word above, instead of two lines down. I've tried googling the issue and it seems there are two solutions - either use display: inline or float: left, but neither are producing the desired results. Note that because I have block element content that I can't simply switch to spans (which would fix the formatting issue instantly, however. An alternative solution would be to get lists and tables to display properly inside of a span, but I spent hours on that and got nowhere, as display:inline on the list didn't do the job.)

    As far as I can tell, there are three places that I have affecting the formatting.

    I have the div tag immediate surrounding the content. Putting in style='float: left' or style='display: inline' doesn't remove the spacing. I have the class the div tag is defined as a member of and its location is in my css in the header. I'm pretty sure that neither of these are the culprit, as they display when the [+] is pressed, and are set to display: none by default.

    Finally, the js supporting file I have is adding the following:
    <div class='inline-spoiler-toggle' title='Show Spoiler' slider-id='I" + i + "'>[+]</div>

    However, I've tried adding both potential fixes there as well to no effect. Also, I don't understand why this segment is adding two line breaks, while div tags usually only add one.

  2. Ricter
    Member
    Posted 1 year ago #

    And apparently posting this gave me the stroke of insight I needed to solve it.

    For those wondering, what you have to do is format the content that's not in the div tag as well by putting them into a div tag. In my case:

    Content here.
    <div> Special Content</div>

    Was resulting in:

    Content here.
    
    Special Content

    I changed my code to:
    <div style="float: left"> Content here. </div>
    <div> Special Content </div>

    And got rid of that nasty spacing:

    Content here. Special Content

Topic Closed

This topic has been closed to new replies.

About this Topic