Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add padding at the beginning and end of each line of text

Tags:

html

css

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: padding difference

<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

like image 458
DonutReply Avatar asked Feb 14 '11 16:02

DonutReply


People also ask

How do you add padding to a text box?

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.

How do you add padding before text in HTML?

Creating extra spaces before or after text To create extra spaces before, after, or in-between your text, use the &nbsp; (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.

What is text padding in HTML?

Padding is used to create space around an element's content, inside of any defined borders. This element has a padding of 70px.

What is padding inline end?

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.


2 Answers

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:

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]-->
like image 87
thirtydot Avatar answered Sep 23 '22 15:09

thirtydot


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;
like image 22
gabitzish Avatar answered Sep 20 '22 15:09

gabitzish