4

HTML

<h1><span>Lorem ipsum<br>dolor si amet<br>etc etc etc</span></h1>

CSS

h1{color:#fff;line-height:48px;}
h1 span{background:#000; color:#fff; padding:5px 10px;}

Fiddle

I would like to add padding left and right on each line. Like this picture

enter image description here

but I can't find a solution. Note that this text can be edited by the client so I don't know where the line break will be.

Warface
  • 5,029
  • 9
  • 56
  • 82
  • There might be some 'clever' solutions but the simple answer is you have breaks in an inline element. padding is ignored for some reason. Make the span a

    or

    and ensure you make it inline-block. http://jsfiddle.net/2HdW2/1/
     – rlemon Jul 11 '13 at 14:39
  • 2
    I've tried this type of thing in an [old answer](http://stackoverflow.com/questions/4994653/add-padding-at-the-beginning-and-end-of-each-line-of-text/4995866#4995866). I never implemented that on a real site, I used JavaScript to make it easy (split text into a separate `span` for each line). – thirtydot Jul 11 '13 at 14:48

3 Answers3

3
<h1>
    <span>Lorem ipsum</span><br/>
    <span>dolor si amet</span><br/>
    <span>etc etc etc</span>
</h1>

Here is the fiddle

Naveen Kumar Alone
  • 7,536
  • 5
  • 36
  • 57
  • Simple and elegant. `+1` – Naftali Jul 11 '13 at 14:46
  • 3
    This is when I can write the content myself, but as I said in my question. The content comes from a textarea which I don't control. The content could be 4 words or 10 words... So I can't add the span manually like your example. – Warface Jul 11 '13 at 14:50
  • 2
    @Warface That is where javascript magic comes into play :-) – Naftali Jul 11 '13 at 14:53
1

Just make the span act as a block element.

h1 span{display: block; background:#000; color:#fff; padding:5px 10px;}

edit The JavaScript solution. Break the span's contents into multiple spans.

var span = document.getElementById("txt");
var newSpans = "<span>" +  
    span.innerHTML.replace(/<br\s*[\/]?>/g, "</span><br /><span>") + 
    "</span>";
span.parentNode.innerHTML = newSpans;
Louis Ricci
  • 20,804
  • 5
  • 48
  • 62
0

span element doesn't support padding by default.

Quote: "spans are inline elements. By default you cannot add top or bottom padding to an inline element only left and right. You will need to either a) make the span display:block or b) float the span so that it inherents display:block for this purpose."

Santiago Baigorria
  • 700
  • 1
  • 6
  • 15
  • 2
    There's nothing special about the span element that makes padding "unsupported", only the display type. Where are you quoting this from? – cimmanon Jul 11 '13 at 14:43
  • `span element doesn't support padding.` - Not quite, by default it's an `inline` element, but you can always change the display property to make it appear like a `block level element` – Nick R Jul 11 '13 at 14:48
  • That's what the quote says. And I now that. I forgot to put the by default... see edit – Santiago Baigorria Jul 11 '13 at 14:55
  • You might *know* that, but your wording is misleading. Also, you can't just quote stuff without providing a link to the source. – cimmanon Jul 11 '13 at 15:32
  • Yes I'm not native English speaker. You should be tolerant since all I'm trying to do is help – Santiago Baigorria Jul 11 '13 at 15:41