Wrapped text with equal side padding

**beebs93** · Jun 14, 2011 12:14

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.

**Paul O'B** · Jun 14, 2011 14:48

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.

**beebs93** · Jun 14, 2011 15:00

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

User Tag List

Thread: Wrapped text with equal side padding

Thread Tools

Display

Wrapped text with equal side padding

Bookmarks

Bookmarks

Posting Permissions