SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to apply padding-right to first line of wrapped text?

    Hello, all! My first post. I'm having an issue and have been unable to find a solution here or elsewhere, and I'm hoping someone smarter than I knows an answer.

    I'm attempting to apply padding to an <a> tag to help it pop from the background, but when the text is too long for one line and it wraps to the second, the padding only effects the end of the first line, ignoring the first line prior to the line break.

    It's not a huge issue, but it's driving me nuts that I can't figure out a solution beyond manually inserting a line break (not a feasible solution for my intended implementation).

    Here's a better example of the issue:



    Or on an html page if you prefer: Example

    The html I'm using:

    Code:
    <div>
      <a href="#">
        How do I get this first line to have padding on the right like the bottom has?
      </a>
    </div>
    and the css:

    Code:
    div {
      height:300px;
      width:800px;
      background:black; 
      margin:0 auto; 
      }
    a {
      padding-right:25px;
      text-decoration:none;
      font-size:38px;
      }
    This seems like there should be a simple solution, but I'm stumped. I'm fine with adding additional elements to the page to achieve the desired results.

    Any ideas?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi justinparks. Welcome to SitePoint.

    Someone asked a very similar question earlier this year, and a solution was worked out. I'll see if I can dig it up.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, here it is. See if this helps:

    http://www.sitepoint.com/forums/java...pt-731966.html

  4. #4
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet, thank you, ralph.m! That worked perfectly.
    I don't understand it, but it worked.

    Gonna have to blow through a chunk of tomorrow dissecting why that works.

    Thank you again!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you wanted to support IE6 and 7 you could add an expression into the mix.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    div {
    	position:relative;
    	background:#ffc;
    	font:bold 100%/1.3 arial;
    	overflow:hidden;
    	zoom:1.0;
    }
    .linewrap {
    	float:left;
    	position:relative;
    	z-index:1;
    	padding:0 10px 0 10px;
    	color:#fff;
    	overflow:hidden;
    	line-height:1.3em;
    	text-align:justify;
     zoom:expression(  runtimeStyle.zoom=1,  insertAdjacentHTML('beforeEnd', '<span class="before"></span><span class="after"></span>')  );
    }
    .linewrap .before, 
    .linewrap:before {/*supplies background colour for all but the last line*/
    	position:absolute;
    	z-index:-2;
    	right:0;
    	bottom:1.3em;/* matches the line-height setting to avoid the last line*/
    	left:0;
    	width:999em;
    	background:#000;
    	content:"\A0";/* non breaking space*/
    	height:999em
    }
    .linewrap .after, 
    .linewrap:after {/*supplies background colour for the wrapped text only*/
    	content:"\A0";
    	position:absolute;
    	color:#fff;
    	width:999em;
    	padding:0 0 0 10px;
    	background:#000;
    	margin-left:-999em;
    	z-index:-1;
    	bottom:0;height:999em
    }
    </style>
    </head>
    <body>
    <div>
    	<h1 class="linewrap">This is some text that will wrap to another line where needed with any luck</h1>
    </div>
    </body>
    </html>

    Or with extra elements although this is a little off in ie6 and 7.

    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>


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
  •