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.

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? — JohnFx, Jun 22 '10 at 20:40
well i'm almost 1 year later, but I'm looking for the exactly same thing.. — pasine, Mar 25 '11 at 15:43
Check out this solution - http://stackoverflow.com/a/34660112/483779 — Stickers, Apr 05 '16 at 22:50

score 25 · Accepted Answer · answered Dec 02 '11 at 08:08

25

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;
}

answered Dec 02 '11 at 08:08

Wolf-Dieter Grabner

266
3
2

seems to be the only way. That's perfect – Ben Jul 13 '12 at 09:52
This is really a great and simple solution to a common task. – klickreflex Oct 05 '12 at 08:13
Anybody has a solution for IE8 and below ? – klefevre Sep 23 '13 at 17:06

score 4 · Answer 2 · answered Nov 03 '10 at 22:07

4

white-space: pre-wrap;

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

answered Nov 03 '10 at 22:07

Lutsen

153
1
11

Thanks. It indeed doesn't solve the problem, but the added space does help me towards the look I'm going for. – Marc Nov 04 '10 at 17:24

score 1 · Answer 3 · answered Jun 22 '10 at 20:41

1

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.

answered Jun 22 '10 at 20:41

Peter Anselmo

2,961
1
17
12

I want to pad the yellow strips of texts, so the text isn't so close to side. Example mock-up: http://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. – Marc Jun 23 '10 at 11:45
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. – Marc Jun 23 '10 at 11:50

score 1 · Answer 4 · answered Jun 23 '10 at 23:20

1

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;
}

answered Jun 23 '10 at 23:20

robertc

74,533
18
193
177

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. – Marc Jun 23 '10 at 23:47
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. – robertc Jun 24 '10 at 12:30
Too bad. I guess I'll just leave it as is then. Thanks for the help though. – Marc Jul 05 '10 at 16:15
@Marc 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: http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-border-break – robertc Sep 22 '10 at 13:08
Interesting to know nevertheless! – Marc Sep 29 '10 at 12:33

Pablo Manera · Answer 5 · 2021-03-22T19:53:20.423

1

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".

edited Mar 22 '21 at 19:53

answered Mar 22 '21 at 08:26

Pablo Manera

41
3

score 0 · Answer 6 · answered Apr 15 '16 at 15:00

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;
}

score -1 · Answer 7 · edited May 28 '13 at 09:09

-1

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

edited May 28 '13 at 09:09

Dhwani

7,484
17
78
139

answered May 28 '13 at 08:47

Josh Moore

11

2

That's not the OP wants... if you do that, there's no "highlight" effect, it looks like a simple box. – Arkana May 28 '13 at 08:58

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

7 Answers7

Linked