www.webdeveloper.com
Results 1 to 6 of 6

Thread: Insert a line break/hard return

  1. #1
    Join Date
    Apr 2012
    Posts
    4

    Insert a line break/hard return

    I'm having a hard time inserting a line break--that's what I call it any way. In Word, for example, it's called a hard return, what one gets when one presses the enter key. For example, how do I insert a blank line between lines 1 and 2 below?

    Line 1
    Line 2
    Line 3

  2. #2
    Join Date
    Nov 2007
    Posts
    409
    "Hard Line Break" is actually a "paragraph marker".
    The equivalent in HTML is to wrap each of your Lines in <p> tags.

    e.g.,
    Code:
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
    The default styling in most browsers is 16px of margin-bottom.

    If you cannot wrap your text in <p> tags, you can simulate the same effect by placing a <br/> tag at the end of the line. A <br> tag does not have any margins on it, by default, so you would need to add a style to it that provides the 16pixels of margin-bottom.

    e.g.,
    Code:
    <style>
    .para{margin-bottom:16px;}
    </style>
    Line 1<br class="para"/>
    Line 2<br class="para"/>
    Line 3<br class="para"/>

  3. #3
    Join Date
    Apr 2012
    Posts
    4
    I'm doing this in WordPress, FWIW, which has an HTML editor tab and a Visual tab. If I insert <br> in the HTML editor it'll indeed add a line break, but the <br> code, itself disappears in the HTML editor, although the blank line appears in the Visual tab. Is that normal?

  4. #4
    Join Date
    Apr 2012
    Posts
    4
    For example, I type this in the HTML Editor tab:

    <span style="color: #000000;"><strong>This Week</strong></span>
    <p>Sample text</p>
    <span style="color: #000000;"><strong>Next Week</strong></span>

    Next, I jump to the visual tab to see what it looks like. (It looks fine, BTW). When I come back to the HTML editor, the same section looks like this:

    <span style="color: #000000;"><strong>This Week</strong></span>

    Sample text

    <span style="color: #000000;"><strong>Next Week</strong></span>

    Should it do that? Shouldn't I still see the <p></p> coding? Maybe it's a WordPress problem...

  5. #5
    Join Date
    Nov 2007
    Posts
    409
    Since it looks like it is displaying it correctly, I'll take a guess that it hides some common HTML tags (brs, p's, probably headings, etc.). But that's just a guess, I have never used WordPress.

  6. #6
    Join Date
    Apr 2012
    Posts
    4
    Makes sense. How do I mark this thread resolved?

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles