CODEWITHSUNDEEP
htmlcsscross-browser
McFarlane
McFarlane

Reputation: 1877

How to colour only words in multiline block element?

I am trying to achieve, that only the text inside a multiline headline element has a background colour with gaps between the lines.

My current solution is to wrap every word in a span but sadly it only works properly in Firefox and Chrome.

This is my current HTML markup:

<div>
  <h3>
    <span>This</span>
    <span>is</span>
    <span>some</span>
    <span>interesting</span>
    <span>Text</span>
    <span>without</span>
    <span>any</span>
    <span>meaning.</span>
  </h3>
</div>

And this is my CSS:


div {
background: black;
height: 200px;
 width:  300px;
position: relative;    
}

h3 {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 20%;
    font-size: 0;
    line-height: 20px;
}

span {
    font-size: 14px;
    color: black;
    background: white;
    font-weight: bold;
    padding: 2px 6px 2px 0;
}
​

Please have a look at this jsfiddle: http://jsfiddle.net/Ez92s/

If you look at it in Opera and Safari, the words have little gap between them and in IE10 the words are all in one line.

How can I achieve the look it has in Chrome in any browser (IE10+)?

Much thanks in advance, McFarlane

Upvotes: 0

Views: 96

Answers (4)

Gareth Cornish
Gareth Cornish

Reputation: 4356

I can't speak for Opera or Safari, but IE seems to respond to adding display: inline-block; to your span definition.

Upvotes: 0

Abdul Malik
Abdul Malik

Reputation: 2642

i think u need to remove span after every single word put whole text in single span and use word-spacing property for example span{ word-spacing:10px;} and if u don't want to remove span you can use margin instead of padding

Upvotes: 2

CR41G14
CR41G14

Reputation: 5594

Add a margin to the span to give the spans spacing between them:

margin-right:1px;

js fiddle

Upvotes: 0

Liam
Liam

Reputation: 29694

Change padding to margin

span {
    font-size: 14px;
    color: black;
    background: white;
    font-weight: bold;
    margin: 2px 6px 2px 0;
}

http://jsfiddle.net/Ez92s/1/

Padding retains the background colour margin does not.

Upvotes: 0

Related Questions