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:

<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:


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?

Hi justinparks. Welcome to SitePoint. :slight_smile:

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

OK, here it is. See if this helps:

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. :slight_smile:

Thank you again!

If you wanted to support IE6 and 7 you could add an expression into the mix.


<!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.


<!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>