CODEWITHSUNDEEP
csstypography
theorise
theorise

Reputation: 7425

Text highlighting (label effect) using CSS

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

enter image description 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?

Upvotes: 10

Views: 10918

Answers (8)

Andrii Verbytskyi
Andrii Verbytskyi

Reputation: 7631

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!)

Upvotes: 0

Saul
Saul

Reputation: 18041

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.

Upvotes: 1

AJFMEDIA
AJFMEDIA

Reputation: 2123

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

Upvotes: 1

Elie
Elie

Reputation: 7353

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/

Upvotes: 0

Stephen
Stephen

Reputation: 18964

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

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

Upvotes: 7

benhowdle89
benhowdle89

Reputation: 37454

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

Upvotes: 0

Chris
Chris

Reputation: 3795

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

Upvotes: 2

Rob
Rob

Reputation: 7707

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

Upvotes: 0

Related Questions