Can this be done with CSS?
- Started
- Last post
- 10 Responses
- graham
The background different lengths for each line? Not even sure what to search for before someone LMGTFY's me :D
- airey0
i think i've seen it done with an underline applied so the underline is obviously so massive it becomes the background. let me google that for ya! i'll be back.
- airey0
ok, here's some basic text background info:
http://www.codeave.com/css/code.…
- airey0
no.4, much the same thing:
http://www.javascriptkit.com/how…
- pillhead0
inclose in a span tag.
<span class="paragraphBG">creating such a clear, concise and easy</span><br />
- graham0
span seems to save the day, cheers everyone
- flashbender0
the trick is display:inline;
<span style="background-color:#99CCFF; display:inline">
This is a long<br />
Headline with a<br />
wrapping background<br />
color
</span>- if it is an element that is usually displayed Block - like an H tagflashbender
- but I can't use <br /> so set a width on the parent?graham
- have a play with that < take out the display:inline and see what happensflashbender
- span is an inline element, so yes... BUT if you want to use it on a proper header H1, H2 ... then you need the display:inlineflashbender
- seeessess0
<h1><span>This is a long</span>
<span>heading and it will</span>
<span>wrap onto a few</span>
<span>lines</span></h1>and the css:
h1 {color:#000; text-transform:uppercase;}
span {background:#9ca9a0; padding:3px 10px; clear:both; float:left;}
- moniker0
Umm if you don;t want to have to add line breaks and spans all over the place you could simply wrap the text within the <h1> tag with an <a> tag like this:
<h1><a href="#">this is a long line of text that will wrap</a></h1>
h1 a {
background: none repeat scroll 0 0 #999999
cursor: text;
}
- kerus0
close but i think you need to use inline-block for the spans to apply similar uneven padding.
span { display: inline-block; background-color: green; padding: 2px 5px 2px 10px; color: black; }
you'll have to use tags for each line though
<span>line one of test</span>
<span> next line of crap etc</span>