CODEWITHSUNDEEP
javascripthtmlcss
Maxim Zubarev
Maxim Zubarev

Reputation: 2473

Inline text background color without dividing into separate elements

I want to have multiple lines of text, which are just one element, to have a background layer which respects the background-padding. As a result, I want to have this: http://d.pr/i/ImRS

What I get is either http://jsfiddle.net/bqfk2/ or http://jsfiddle.net/Jmk4D/2/ (the latter is from this question) which is both not what I want: first example got no left/right paddings at the beginning and end of lines, second example requires multiple elements.

<div>
    <p>desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<style>
div {
    font-size: 2em;
    background: #fff;
    border: 1px solid #ccc;
    padding: 1em;
    width: 300px;
}

div > p {
    background: yellow;
    display: inline;
    line-height: 1.4em;
}
</style>

I would also accept a solution which would divide the text into multiple elements which still correspond to the original text line breaks (respecting every font). The goal should be not to let the user divide the text into parts and still have this effect.

Upvotes: 0

Views: 123

Answers (1)

Mr_Green
Mr_Green

Reputation: 41832

Try Box-shadow,

div {
    font-size: 2em;
    background: #fff;
    border: 1px solid #ccc;
    padding: 1em;
    width: 300px;
}
div > p {
    background: yellow;
    display: inline;
    line-height: 1.4em;
    box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
    -moz-box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
    -webkit-box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
}

Source

Working Fiddle

Upvotes: 2

Related Questions