I've got a span which goes over a number of lines and has a background colour. I need each of the lines to have a 10px padding at the end. The text will be dynamic so i need a css or js solution rather than just hacking it with nbsp tags (which is how I got the example pictured below)
The picture show the difference between what I have and what i want:
<h3><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br/>
<span class="subhead">IT'S RIGHT HERE</span></h3>
h3 {
margin:0;
font-size: 42px;}
h3 .heading {
background-color: #000;
color: #00a3d0;}
h3 .subhead {
background-color: #00a3d0;
color: #000;}
I can't think of any way to do this with css, I was considering using javascript to find the beginning and end of each line and adding a non-breaking space.
Does anyone have any ideas of how to achieve this? Cheers
Right-click the selection rectangle of the shape or text box you want to change. On the shortcut menu, click Format <object type>, and then click the Text Box tab. Under Text Box Margins, adjust the measurements to increase or decrease the distance between the text and the outer border of the text box or a shape.
Creating extra spaces before or after text To create extra spaces before, after, or in-between your text, use the (non-breaking space) extended HTML character. For example, with the phrasing "extra space" using a double space, we have the following code in our HTML.
Padding is used to create space around an element's content, inside of any defined borders. This element has a padding of 70px.
The padding-inline-end CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
I've tested this in IE8 (doesn't look too bad in IE7) and recent versions of Chrome, Firefox, Opera, Safari.
Live Demo
Screenshot from Chrome:
It got a bit silly and, to be honest, probably more complicated than it's worth - a JS based solution would definitely be easier to understand.
There are so many gotchas with this technique.
CSS:
#titleContainer {
width: 520px
}
h3 {
margin:0;
font-size: 42px;
font-weight: bold;
font-family: sans-serif
}
h3 .heading {
background-color: #000;
color: #00a3d0;
}
h3 .subhead {
background-color: #00a3d0;
color: #000;
}
div {
line-height: 1.1;
padding: 1px 0;
border-left: 30px solid #000;
display: inline-block;
}
h3 {
background-color: #000;
color: #fff;
display: inline;
margin: 0;
padding: 0
}
h3 .indent {
position: relative;
left: -15px;
}
h3 .subhead {
padding: 0 15px;
float: left;
margin: 3px 0 0 -29px;
outline: 1px solid #00a3d0;
line-height: 1.15
}
HTML:
<div id="titleContainer">
<h3><span class="indent">
<span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br /><span class="subhead">IT'S RIGHT HERE</span>
</span></h3>
</div>
<!--[if IE]><style>
h3 .subhead {
margin-left: -14px
}
</style><![endif]-->
box-shadow makes it easy!
box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-moz-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-webkit-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With