Set background-color on only the text not the empty space in a td

Question

I'm trying to get the background color to wrap around the text alone, not the empty spaces.

I now have:

<TD> Text <BR><BR>
Longer text that stretches out above text-background color...
</TD>

and css:

td {background-color: black; color: white}

The rest of the space I would like just to be transparant, but I can't find any variable for this...

score 3 · Answer 1 · answered Jan 03 '12 at 14:51

3

try display:inline; :

td {background-color: black; color: white; display:inline;}

answered Jan 03 '12 at 14:51

Rodik

1

Hm. It's never a good idea to change the display property of , just for the sake of appearances! – Mr Lister Jan 03 '12 at 15:20
same problem as above, the new line (of the same sentence) is not indented, and for my purpose (as a header) it doesn't work.. Especially when i put a
tag in the span, it puts the header on another line entirely..
– TrySpace Jan 09 '12 at 14:25

score 2 · Accepted Answer · answered Jan 03 '12 at 14:52

2

try span as given below will do your work.....

<TD> <span> Text <BR><BR> Longer text that stretches out above text-background color... 
 </span></TD> 

span {background-color: black; color: white}

answered Jan 03 '12 at 14:52

Pranay Rana

Well.. the span method works quite well, however, when i apply this to a sentence that doesn't fit on one line, and it goes to the second line, without using
or anything, it will not indent the first word on the new line, like the padding/margin i set for the first word of the sentence.. but were getting closer... – TrySpace Jan 09 '12 at 14:23

score 0 · Answer 3 · answered Jan 03 '12 at 14:50

0

Put a <span> around the text, and give that the background colour.

answered Jan 03 '12 at 14:50

Pekka

3 Answers3