We’ve had this question a few times over the years and the simplest answer went like this.
There was also a later article on CSS tricks but none of the methods were better than the ones we found and indeed most of the ones listed are broken in various browsers now.
Erik J and I came up with a method that doesn’t require extra mark up but doesn’t quite work as well as my codepen example as id doesn’t give the complete ragged edge…
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1, h2 {
margin:0;
}
div {
position:relative;
font:bold 100%/1.3 arial;
overflow:hidden;
text-align:justify;
}
.linewrap {
float:left;
position:relative;
z-index:1;
padding:0 10px 0 10px;
color:#fff;
overflow:hidden;
line-height:1.3em;
}
.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:red;
content:"\00a0";/* non breaking space*/
}
.linewrap:after {/*supplies background colour for the wrapped text only*/
content:"\00a0";
position:absolute;
color:#fff;
width:999em;
padding:0 0 0 10px;
background:red;
margin-left:-999em;
z-index:-1;
bottom:0;
}
.block {
width:400px;
}
</style>
</head>
<body>
<div class="block">
<h1 class="linewrap">Heading</h1>
<h2 class="linewrap">Sub heading Sub heading Sub heading Sub heading Sub heading Sub heading</h2>
</div>
</body>
</html>