CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 359

Text background colour cuts to shape and length of text

is it possible to make the background colour of a line of text fit to the edge of the text itself?

Here is a visual example of what I'm trying to accomplish:

CSS cut in text http://www.blinkblink.co.uk/example.jpg

The text is a <h3> inside a <div> and at present all I can achieve is a square block background.

Upvotes: 0

Views: 909

Answers (2)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

If you want to get something like to cover whole of the text! You can use this:

<div>
 <h3>Afzaal Ahmad Zeeshan</h3>
</div>

And do this: 

div {
 background-color: #hexcode;
}

Secondly, if you want only the text to be wrapped, then you can try to remove the padding: or margin: Even if you don't have any, still write this:

h3 {
margin: 0;
padding: 0;
}

This way, all of the padding or margins will be removed and the background will be provided on just the text!

This second one will fit perfect for your question: "make the background colour of a line of text fit to the edge of the text itself?"

Upvotes: 1

j08691
j08691

Reputation: 207900

Sure, set the display property of the h3 element to inline. You may also need to adjust the line-height property to match the font size.

display:inline;
font-size:20px;
line-height:20px;

jsFiddle example

Upvotes: 0

Related Questions