Text highlighting (label effect) using CSS

问题

I want to create a text style similar to a label. Looky here:

I can nearly do it using just: http://jsfiddle.net/STApE/

p{display: inline; background: yellow;}

BUT, I want to add some padding. When I do, things go downhill. Same happens if I add a border: http://jsfiddle.net/JN72d/

Any ideas on a simple way to achieve this effect?

回答1:

I was able to achieve it by modifying your DOM structure a bit:

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

回答2:

Wrap each line with a span. Set the span to be block-level. Apply background and padding to span.

回答3:

this sort of thing you are looking for?

Was a little long winded! hense the 44 in the url . If you can live without p tags then should be ok for you

Example

回答4:

Instead of <p> you could 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 example.

回答5:

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

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

回答6:

Could use <pre>? Leaves it formatted how you want it

回答7:

Add spans to your paragraph like this:

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

Notice the display: inline-block attribute. I forked your code: http://jsfiddle.net/eliekhoury/JN72d/27/

回答8:

It is a hard task to do...

BUT :) I found a Great Article for this!

With the following solutions you can make your Dinamic text highlighted without using wrap for each line.

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

Enjoy!)

来源：https://stackoverflow.com/questions/4899373/text-highlighting-label-effect-using-css

标签

css

typography