Padding on wrapped span?

Padding missing on second line

[vincevincevince]

I have text as follows:

<span>long text here which
wraps here</span>

I have applied a CSS background colour and padding. If the text is on a single line, I see the background behind the text, and in a 'border' around it due to padding. This is what I want.

When the text wraps to two lines:
- There is no padding on the right hand edge of line one
- There is no padding on the left hand edge of line two

I want to have the same padding around the text on all edges. Note that I do not want a 100% width design, and I do want the second line to be only as long as is required (e.g. it should not have the background extended to match the length of the first line).

Can anyone help? Even with a 'imaginative' solution?

[swa66]

I'm not fully sure I understand what you seek to have, but perhaps

text-align: justified; on the parent of the span ? At least it'll move the text and the background till the end of the content area of the parent.

[swa66]

FWIW: the lack of padding on inline element wrapping "breaks" is conforming to what the standard wants: [w3.org...]

[londrum]

to get the padding effect that you want you'll have to put the text inside an actual box, like a <div>, because <span> is an inline element.

but if you want to keep the background on the line-length only, and not the box, then you'll have to keep the span in place and apply the background to that. (but apply the padding to the div)

[vincevincevince]

swa66 got the problem right I think.

Consider the below wrapped text:

*TEXT TEXT TEXT=
=TEXT*

* is the padding applied by CSS currently
= is where I want to put padding but do not know how

I do not want the bottom line to match the length of the top line (as it would in a block element.

Any solutions?

[SuzyUK]

I don't think so vvv, from that same page swa linked to:

When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

that is happening with most browsers, IE7 is showing a border, which by all accounts it shouldn't, but no padding.

However, it depends on the context of your span, e.g. is it inside a <p> with other text before and after it.. or is it a "standalone" bit of text if the latter I would suggest londrums method, of putting it inside it's own div or <p> and putting the padding on the outer element,

if the former, I've tried a few things, but nothing, you can't really have any effect on the 'anonymous' inline boxes the span produces when it splits.

[jameshopkins]

This is possible, although it's a fairly imaginative solution. Firefox, Safari are fine with it - IE (including 8 won't be); haven't tested it on Opera, although it should be fine.

-----------------------------------
#parent{
border-left:13px solid lime;
display:block;
}

#parent:after{
content:'\a0';
display:inline-block;
width:13px;
background:lime;
line-height:1.2em;
}

#parent span{
background:lime;
line-height:1.2em;
padding-right:13px;
direction:rtl;
}

div{
width:300px;
}

<span id="parent"><span>hghfhgt and l;dfkl;dsfjdsklfjds lfjl dsjklfjdslkf dsklfj

fdsdsjdsklfj ds; jkl;j</span></span>
---------------------------------------------------

My solution isn't that flexible, as it's limited to only two lines. SuzyUK and co are correct; there isn't a proper solution to this issue out there at the moment.

[vincevincevince]

jameshopkins, that is actually a very good solution and highly imaginative. (slight bug in that we get double padding if the content is only one one line)

I will see if I can't coax javascript into making it work in IE as well.

[SuzyUK]

generated content.. great thought and in my test, IE8 is OK with it too :o, so vvv the ie7.js might do it to get back compatibility?

however you still don't get the padding at the left side of the second line which I thought you wanted, if this is to be a standalone block (or inline-block), i.e. not in a paragraph with ordinary text before and after it, I think some more trickery could be invoked using a combination of padding/negative margin and generated content

[jameshopkins]

generated content.. great thought and in my test, IE8 is OK with it too :o, so vvv the ie7.js might do it to get back compatibility?

I thought IE7 did support this area of generated content?

however you still don't get the padding at the left side of the second line which I thought you wanted

Yes you do (in FF and Safari, anyway); there is an emulated padding on each horizontal side of both line boxes. What are you referring to?

EDIT Just checked it in IE8 and it seems as though padding direction isn't reversed when writing direction is reversed.

[SuzyUK]

Ah Yes IE8 does the generated content, IE7 doesn't.. neither 7 or 8 reverse the padding direction, which was the other clever bit I missed in your example.

In the browsers that do support the text-direction reversal, it only works on the first line, but you knew that.. hence the double space "bug" when both that and the generated content are on the first line.

I also noticed another "feature" ;) if the span is all on one line just and no more.. then the rtl padding is on the right and the generated content moves down a line.. this would make a space between this text an the next if any so depending on the context this might not be a problem

really good solution @jh

>>What are you referring to?
No idea now, I had three sets of code in one page and must have made a mistake with the */ or test code overlapped or a parse error - it obviously wasn't picking up that border :o sorry!

[swa66]

I was thinking of checking the (many) CSS3 word wrap options and/or UTF8 characters, but I found little there so far.

The best one is "text-indent: 5px hanging;" which would indent lines after the first one on the left (assuming ltr text). But it's not to be applied on inline elements (bock and inline-block)

Now I'd suggest to dig a bit deeper if the CSS word wrap modules have this and try to bring it to the attention of those managing that.

[w3.org...]