Why do you have a span holding the <h1>? That’s invalid. What’s the end look you are going for? Why did you make those headers inline? Are you looking for a more inline-block kinda thing?
If I understand you right, you just basically want padding to display on all sides, not just the top and bottom? Change h1,h2 to display:inline-block. I am as confused as Ryan as to why you have a span as a parent element of an h1. Changing/eliminating the line-height makes it look more natural, in case you were looking at the disproportionate amount of padding appearing on the top and bottom
If you can write a small JS that inserts ​ (a non-breaking space followed by a zero-width space) between each word in the <h2><span>, it would hide the dirt and the inserts would be rendered in the HTML.
The non-breaking space applies the space to the right of the word when the next word wraps. The zero-width space allows the words to wrap. The space along the left side of the box is applied by a border.
Unfortunately, I don’t know of a better way if the sentences need to wrap between different words responsively.
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>
The difference with your example and my example is that mine is an automatic wrap and will work on any line length that needs to wrap. It’s not just a series of short lines like your example. In a percentage layout the effect is still the same for my example and you don’t need to split the text at set points to create the effect. Just change the width of the block in my example to a percentage and the effect is still maintained.
It only used 2 nested spans so is hardly more complicated than your example and you don’t need to manage the text
