How to get rid of space between lines of multiline span?

Question

For example, this JSFiddle: https://jsfiddle.net/qmn8q2ck/

<p>
    <span> This is some multiline text. This is some multiline text. </span><span>This is some multiline text. This is some multiline text. This is some multiline text. This is some multiline text. This is some multiline text. This is some multiline text. This is some multiline text. </span>
</p>

span {
    background-color: red;
    display: inline;
}

enter image description here

However, I noticed that browser highlighting doesn't have spaces between lines, and has the effect that I would like.

enter image description here

How do I get this effect?

Edited to show need for display:inline and effecting the span elements as opposed to the whole paragraph.

You want that the text will be displayed as 1 line and won't 'break'? — Shaked Dahan, Jul 14 '15 at 16:40
http://stackoverflow.com/questions/12709313/css-background-color-on-multi-line-text — Andreas, Jul 14 '15 at 16:46

Joe Koker · Answer 1 · 2015-07-14T17:16:17.773

3

Also you can add to your span css display:inline-block

span {
  background: red;
  display: inline-block;
}

DEMO : http://jsfiddle.net/qmn8q2ck/

OR add padding

DEMO : http://jsfiddle.net/ckhfa8hc/

span {
  background-color: red;
  display: inline;
  padding-top: 1px;
}

edited Jul 14 '15 at 17:16

answered Jul 14 '15 at 16:55

Joe Koker

931
10
20

score 1 · Accepted Answer · answered Jul 14 '15 at 16:42

1

With css line-height property

p { /* or span as you like */
   line-height: 90%; /* Try some values here */
}

answered Jul 14 '15 at 16:42

Carlos2W

2,024
2
16
19

Is it possible to do this without changing the line height? I would effectively like to increase the "content" area without changing the actual appearance. – knightian Jul 14 '15 at 17:06
I did this, and for larger line-heights, I added padding. – knightian Jul 14 '15 at 17:16

score 1 · Answer 3 · answered Jul 14 '15 at 16:53

1

could you please explain your problem in detail? .. from what i understood..

you should probably apply background-color property to the paragraph instead of the span

p { background-color: red; }

try this

answered Jul 14 '15 at 16:53

Omkar Kulkarni

784
6
12

How to get rid of space between lines of multiline span?

3 Answers3