css background color only of text justify

Question

I want to set the background color only of a justified text (like when the text is selected by the mouse)

I've tried with div,

or span inside div,

or p without margin,

or h1 display inline,

but no one of these solutions solved my problem.

I don't mean the ::selection pseudo, but the text background that is always displayed

I want exactly this:

enter image description here

Please help

Fiddle

Strange. `` inside `
` did it for me? See my answer below.
– sampathsris Jul 08 '14 at 07:10 — sampathsris, Jul 08 '14 at 07:10

score 1 · Accepted Answer · answered Jul 08 '14 at 07:20

1

You can try this

HTML

<div class="CC ">
    <div class="bg">Lorem ipsum dolor sit amet</div>
</div>

CSS

.bg {
    background-color:red;
    display:inline;
    padding: 1px 0
}

answered Jul 08 '14 at 07:20

Tushar

4,280
5
24
39

score 0 · Answer 2 · answered Jul 08 '14 at 06:06

0

Set the background property to whatever color you'd like.

Updated JSFiddle.

answered Jul 08 '14 at 06:06

rageandqq

2,221
18
24

score 0 · Answer 3 · answered Jul 08 '14 at 06:21

0

you can try like this: DEMO

HTML:

  <div class="CC ">
        <div class="bg">Lorem ipsum dolor sit amet
</div></div>

CSS:

.bg {
    background-color:red;
    display:inline;
}

answered Jul 08 '14 at 06:21

G.L.P

7,119
5
25
41

I've tried your code under chrome and firefox, but there are grey lines between rows... – Jul 08 '14 at 06:23
just add line-height on the .CC to fix this: http://jsfiddle.net/danield770/tsXuH/13/ – Danield Jul 08 '14 at 06:29

score 0 · Answer 4 · answered Jul 08 '14 at 06:22

The desired appearance requires the use of an inline element, since that is the way to stop the background where the text ends. Since you also want justified text, which requires a block element, you need two elements: a span, containing all the text of the block, nested inside a div or p:

<div class="CC"><span class="CCC">Lorem ipsum ... in futurum.</span></div>

The you just set the background on the span element:

.CCC { background: red; color: yellow }

score -1 · Answer 5 · answered Jul 08 '14 at 06:17

-1

you can give like this

::selection {
    background: #ffb7b7; /* Safari */
    }
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

or

p::selection {
    background: #ffb7b7; /* Safari */
    }

answered Jul 08 '14 at 06:17

Drunken Daddy

7,326
14
70
104

css background color only of text justify

5 Answers5