CODEWITHSUNDEEP
css
user3205479
user3205479

Reputation: 1523

Apply background color to width based on content width

I just want to apply background-color based on the width of the content occupied. I have used following two snippets.

// this applies for the entire row and not for the text occupied
<p style="padding: 10px; background: #77bb77; color: #fff; border-radius: 10px; text-align:right">
   Text me
</p>

// if text is larger than width of <p> then text wraps to next row
// and it is not applying padding correctly on the second row 
<p style="text-align: right">
  <span style="padding: 10px; background: #77bb77; color: #fff;border-radius: 10px;">
     Text me
  </span>
</p>

Please check the fiddle https://jsfiddle.net/adww60ry/

Upvotes: 0

Views: 43

Answers (2)

Shahar15
Shahar15

Reputation: 1

Try this:

  <span style="padding: 10px; background: #77bb77; color: #fff;border-radius: 10px;display:inline;">
 Text me

seems to work fine. https://jsfiddle.net/ndt2db12/

Upvotes: 0

Elliott Mantock
Elliott Mantock

Reputation: 26

I think what you are looking for is the style display: inline-block;

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Upvotes: 1

Related Questions