I’m not sure a javascript solution is going to be very usable (but I may be wrong) . You would have to tie it to the resize event and that will make the page a bit choppy when resized. Hopefully some one will come along with some suitable JS soon though.
I had another think and the nearest I could get to it without adding extra mark-up is as follows.
<!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 {
padding:0 10px 0 10px;
line-height:36px;
background:#000;
color:#fff;
float:left;
overflow:hidden;
position:relative;
}
.linewrap:after {
content:"x";
float:right;
background:#fff;
color:#fff;
left:auto;
margin-left:10px;
position:absolute;
width:999em
}
</style>
</head>
<body>
<h1 class="linewrap">This is some text that will wrap to another line where needed with any luck</h1>
</html>
I just made it a floated element and then rubbed out the black background using a white background on the pseudo :after class. It works except that you will always get an overhang space on the right where the text on the line above was before it wrapped.
Thanks again, unfortunatly though in this case the text is on a slightly transparent background with an image behind it so i’m not really able to use a ‘canceling out’ color
With the help of Erik J we have a solution that works without extra markup in ie8 and other modern browsers (not ie7 and under).
<!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;
}
.linewrap {
float:left;
position:relative;
z-index:1;
padding:0 10px 0 10px;
color:#fff;
overflow:hidden;
line-height:1.3em;
text-align:justify;
}
.linewrap:before {/*supplies background colour for all but the last line*/
position:absolute;
z-index:-2;
top:0;
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*/
}
.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;
}
</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>
The div wrapper is not needed and is just there for the demo to show the underlying background is still visible.
Whew! (Thanks to Erik for the additional fix to make this work properly)
)