Apply Background Color on Text Spanning

While applying a background color for a text that spans to multiple lines, the full container gets filled with the color. However the need is to apply the background color only on the text.

The problem can be solved by setting the text container as a inline element, rather than a block element. The box-decoration-break property can also be used to apply padding to each line of text, rather than applying it only to the container.

See also  Portfolio Hover Effects In Pure CSS/CSS3

Example

Apply Background Color on Text Spanning Multiple Lines with CSS

HTML & CSS :

<!- text is contained within a span which is an inline element -->
<h2><span>Apply Background Color on Text Spanning Multiple Lines with CSS</span></h2>
h2 {
	font-size: 50px;
	color: white;
	text-align: center;
}

h2 span {
	background-color: #16a085;
	padding: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 100px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *