Line wrap padding with js

Hmm, I couldn’t find the thread but I remember this from a few months ago and there were a few variations. I’ll see if I can find the thread when I have more time. I believe the solution was based on borders and some relative positioning and went something like this:


<!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 {
  border-left:20px solid #000;
    line-height:36px;
}
.linewrap span{background:#000;color:#fff;position:relative;}
.linewrap span span{left:-10px;}
</style>
</head>
<body>
<h1 class="linewrap"><span><span>This is some text that will wrap where needed</span></span></h1>
</body>
</html>

That seems to do what you want but you lose the gap on the right in IE6 and 7 (other browsers are ok though).