Wrapped text with equal side padding

HTML & CSS
1

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.

2

Hi,

I think we exhausted the possibilities in this thread. The [URL=“http://www.sitepoint.com/forums/javascript-15/line-wrap-padding-javascript-731966.html#post4807330”]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:


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

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