Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Australia
    Posts
    356
    Thanks
    143
    Thanked 0 Times in 0 Posts

    "Don't break my li text, carry down to next line if needed"

    "Don't break my li text, carry down to next line if needed"

    That's what I want to specify in my css so that my horizontal (a.k.a. "inline") list does not contain broken up text when it reaches the end of the line:
    Code:
    [h3]Common Sayings[/h3]
    <ul.inline>
    <li> An apple a day keeps the doctor away </li>
    <li> People in glass houses should not throw stones </li>
    <li> What goes around comes around </li>
    </ul>
    Now this is an inline list and it will run across the page. When it reaches the end I want it not to break up any of my text, but to carry the li container's text down to the next line if need be.
    Last edited by ptrcao; 12-12-2010 at 02:37 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ptrcao,
    Both display: inline; and float: left; can do that.
    See this example -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    /*float version*/
    ul.inline li {
    	margin: 0 0 0 20px;
    	float: left;
    }
    /* inline version
    ul.inline li {
    	display: inline;
    	white-space: nowrap;
    }*/
    </style>
    </head>
    <body>
        <div id="container">
            <h3>Common Sayings</h3>
                <ul class="inline">
                    <li> An apple a day keeps the doctor away </li>
                    <li> People in glass houses should not throw stones </li>
                    <li> What goes around comes around </li>
                </ul>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ptrcao (12-12-2010)

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    0
    Thanked 2 Times in 2 Posts

    white-space noline and prewrap can do it

    Code:
    white-space:nowrap
    will keep an element together.

    Code:
    white-space:pre-line
    is what prevents the line breaks.

    Using those two in combination, I came up with the following solution:

    Code:
    <HTML>
    <style type="text/css">
    p{display:inline;white-space:nowrap;}
    preline{display:inline;white-space:pre-line;}
    </style>
    [h3]Common Sayings[/h3]
    <div id="preline">
    <p>An apple a day keeps the doctor away </p>
    <p>People in glass houses should not throw stones </p>
    <p>What goes around comes around </p>
    </div>
    </HTML>
    This wraps the whole group as a division with the pre-line condition, and then each internal line is treated as nowrap.


    When that's applied to a list, though, you will lose the bullets. It may be helpful to fake them in as special characters; symbol entity
    Code:
    &bull
    will provide one.
    Last edited by agxphoto; 12-12-2010 at 04:27 PM. Reason: Deleted code example as for ul because it flunked another test after posting.
    You are familiar with computers, right?

  • Users who have thanked agxphoto for this post:

    ptrcao (12-12-2010)

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by ptrcao View Post
    "Don't break my li text, carry down to next line if needed"

    That's what I want to specify in my css so that my horizontal (a.k.a. "inline") list does not contain broken up text when it reaches the end of the line:
    Code:
    [h3]Common Sayings[/h3]
    <ul.inline>
    <li> An apple a day keeps the doctor away </li>
    <li> People in glass houses should not throw stones </li>
    <li> What goes around comes around </li>
    </ul>
    Now this is an inline list and it will run across the page. When it reaches the end I want it not to break up any of my text, but to carry the li container's text down to the next line if need be.
    I assume that you mean "complete, individual li elements" by "li container's [sic]" and that "<ul.inline>" is some kind of pseudo-code to indicate that all of the li elements are being displayed inline (e.g., with display: inline).

    If so, this is a bit easier than agxphoto made it out to be:

    Code:
    li { white-space: nowrap; }
    All this does is prevent line-breaking opportunities within the selected elements. An entire element can break onto a new line, but there can't be any intra-element breaks.

    Quote Originally Posted by agxphoto View Post
    Code:
    white-space:nowrap
    will keep an element together.

    Code:
    white-space:pre-line
    is what prevents the line breaks.

    Using those two in combination, I came up with the following solution:

    Code:
    <HTML>
    <style type="text/css">
    p{display:inline;white-space:nowrap;}
    preline{display:inline;white-space:pre-line;}
    </style>
    [h3]Common Sayings[/h3]
    <div id="preline">
    <p>An apple a day keeps the doctor away </p>
    <p>People in glass houses should not throw stones </p>
    <p>What goes around comes around </p>
    </div>
    </HTML>
    This wraps the whole group as a division with the pre-line condition, and then each internal line is treated as nowrap.
    I'm at a bit of a loss for why you're using white-space: pre-line. It doesn't seem to be necessary here.

    Quote Originally Posted by agxphoto View Post
    When that's applied to a list, though, you will lose the bullets. It may be helpful to fake them in as special characters; symbol entity
    Code:
    &bull
    will provide one.
    Alternatively, these can be generated via CSS:

    Code:
    li::before { content: "\2022\a0"; /* U+2022 BULLET & U+00A0 NO-BREAK SPACE */ }
    /* CSS2.1 pseudo-element syntax (|:before| (with one colon)) is better supported than the CSS3 syntax (with two colons) */
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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