Geek Answers Handbook

Highlight text (label effect) using CSS

I want to create a text style that looks like a label. Look here:

enter image description here

I can almost do this using only: http://jsfiddle.net/STApE/

p{display: inline; background: yellow;}

BUT, I want to add a residence permit. When I do this, everything goes down. The same thing will happen if I add a border: http://jsfiddle.net/JN72d/

Any ideas on a simple way to achieve this effect?

+6
css typography
source share
8 answers

I was able to achieve this by slightly modifying the structure of the DOM:

http://jsfiddle.net/Zp2Cm/2/

+6
source share

Wrap each line with a span. Set the range at block level. Apply background and padding for coverage.

+2
source share

Instead of <p> you can use <span> and float :

 <style type="text/css"> span { float: left; background: yellow; padding: 3px; text-transform: uppercase; clear: left; } </style> <span>highlighting the text</span> <span>like this</span> <span>using just css</span> <span>is harder</span> <span>than it looks</span>

See an example .

+1
source share

what kind of things are you looking for?

There was a little long wind! bitch 44 in the url. If you can live without p tags, then you will be fine.

Example

+1
source share

I think you can achieve what you want by changing display:inline to display:inline-block . This has some overview compatibility issues (depending on your target set):

http://www.quirksmode.org/css/display.html

0
source share

Can I use <pre> ? Leaves are formatted the way you want.

0
source share

Add spaces to your paragraph as follows:

 <p class="p1"> <span>Highlighting the text</span><br/> <span>like this</span><br /> <span>using just CSS</span><br /> <span>is as easy</span><br /> <span>as it looks.</span> </p>

And add the following CSS:

 p.p1{display: inline; background: yellow;} span {padding: 5px; background: yellow; display: inline-block;}

Pay attention to the display attribute : inline block . I forked your code: http://jsfiddle.net/eliekhoury/JN72d/27/

0
source share

This is a difficult task ...

BUT: I found a great article for you!

With the following solutions, you can highlight Dinamic text without using a wrapper for each line.

Demo Article : http://css-tricks.com/multi-line-padded-text/

Enjoy it!)

0
source share

More articles:


All Articles