SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wrapped text with equal side padding

    I'm trying to achieve text with a background color that wraps with a gap between each wrapped line.

    Example(image):



    If you use a block element you don't get the gap between wrapped lines, so I can get close using a <span>, but the left & right padding only applies to the very beginning and very end of the <span>.

    I could achieve the effect just using a different <span> or block element for each line and fudge the wrapping, but then it defeats the purpose.
    Attached Images Attached Images
    "To be truly dedicated to something
    you must be willing to betray it.
    " -SW

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,857
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I think we exhausted the possibilities in this thread. The final solution works in IE8+ but doesn't have the gaps between lines that you wanted.

    With extra mark up you could do something like this:

    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">
    .linewrap {
        color:#fff;
        position:relative;
        border-left:20px solid #000;
        width:50%;
        font-size:32px;
        line-height:38px;
    }
    .linewrap em {
        position:relative;
        font-style:normal;
        background:#000;
    }
    .linewrap span {
        position:relative;
        left:-20px;
        border-bottom:1px solid #fff;
        border-top:1px solid #fff;
    }
    .linewrap b {
        color:#fff;
        position:relative;
        padding:0 10px 0 0;
        background:#000;
        left:10px
    }
    </style>
    </head>
    <body>
    <h1 class="linewrap"><em><span><b>This is some text that will wrap to another line where needed but the background only follows the text</b></span></em></h1>
    </body>
    </html>

    It won't work in IE7 and under though.

  3. #3
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. Someone else pointed out that thread to me earlier, but the content in question will eventually be entered by the client so I'll just have to change the design to avoid trying to explain nested elements
    "To be truly dedicated to something
    you must be willing to betray it.
    " -SW


Bookmarks

Posting Permissions

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