How to add horizontal padding to every line in one multi-line wrapped sentence?

Question

This is my code:

<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>

This is what it currently looks like:

http://i48.tinypic.com/2dqvo1i.png

Is there a way to add padding to the sides of the highlighted text? Regular padding on the SPAN doesn't work, because it only takes into account the the beginning and end of the sentence, not every line separately.

Any ideas? CSS3 code is fine.

Bauske

Just to clarify, are you looking for each line of the wrapped text to be padded differently? If not, why not just apply the padding to the div tag? – Twiddle

well i'm almost 1 year later, but I'm looking for the exactly same thing.. – Senseless

Check out this solution - https://mcmap.net/q/295577/-how-to-apply-padding-to-every-line-in-multi-line-text – Bissonnette

Answer 1

After struggling for some time I found a non-quirky solution with a decent fallback for older browsers – adding two CSS3-shadows to the lines of text:

span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}

Dissatisfactory

seems to be the only way. That's perfect – Palgrave

This is really a great and simple solution to a common task. – Peay

Anybody has a solution for IE8 and below ? – Kermitkermy

Answer 2

white-space: pre-wrap;

Not really a solution, but does add some space before the break.

Relict

Thanks. It indeed doesn't solve the problem, but the added space does help me towards the look I'm going for. – Bauske

Answer 3

Just pad the "p" tags that surround the spans. The "p" tag (unlike span) is a block-level element, so padding on the top, bottom, or sides will work as expected.

Myranda

I want to pad the yellow strips of texts, so the text isn't so close to side. Example mock-up: i50.tinypic.com/206dlef.png When adding the padding to the P, it just adds padding to the block as whole. However, I want to add the padding to the lines of text individually. I'm starting to think it's not possible, because the line of text is already interpreted as ONE element, but for my idea to work, it needs to interpret each line of text separately for the horizontal padding to work. – Bauske

Unfortunately though, I CAN'T create separate elements for each line, because they are created dynamically and I don't know the 'break-off' point beforehand. Ideally there would be an :each-line pseudo-selector, that I could use to pad each line individually. – Bauske

Answer 4

Try inline-block. It won't work in anything older than IE8 (though there are some work arounds), but everything else popular should be fine:

p span {
    display: inline-block;
    padding: 0 2em;
}

Minelayer

Unfortunately that doesn't work either. It just creates a block element, that doesn't clear it's siblings. Effectively, this means I get a block of yellow, instead of lines of yellow. – Bauske

Oh I see. Then I think what you want is not possible - padding by its nature applies to blocks. Some kind of jQuery solution to add non-breaking spaces at appropriate places is the only way to go. – Minelayer

Too bad. I guess I'll just leave it as is then. Thanks for the help though. – Bauske

@Bauske It'll not be much use to you, but I've found out today there was a CSS property proposed which would allow you to do this, unfortunately it has since been dropped: w3.org/TR/2008/WD-css3-background-20080910/#the-border-break – Minelayer

Interesting to know nevertheless! – Bauske

Answer 5

A simple way is to add this to your style sector definitions:

span {
padding-left: 8px;
padding-right: 8px;
}

Also it works for "p" (and for others) instead of "span".

Zeringue

Answer 6

Finally found a way out this misery. Worked for me. Use a button on the left like this.

<p>
<button class="blankspace">
</button>
<span>
</span>
</p>

and css it like

.blankspace {
    background: none;
    opacity: 0.0;
    outline:0;
    text-decoration: none;
    width: 2%;
    height: 80%;
    margin:0 auto;
    float:left;
    text-align:right;
    padding:0%;
    font-size:2px;
}

Linda

Answer 7

Instead of adding two CSS3-shadows as suggested, here is a much simpler answer:

use display:block

<span> is display:inline by default, so the borders and padding you added aren't actually affecting it's size. So only the first line is affected.

Use display:block on the span and <span> now works like <p> and <div>.

Here's a good explanation: http://quirksmode.org/css/css2/display.html

Gravedigger

That's not the OP wants... if you do that, there's no "highlight" effect, it looks like a simple box. – Materiality