Padding for two-lined headline

Question

That is a little bit hard to explain, if someone knows a better title for this, please go ahead and change it.

I want to draw a black box behind my headline. I'm doing this with a span inside the h-tag. It needs a little bit padding to the left and to the right. My layout is responsive, so it is likely that the heading breaks into two lines.

    <div class="headline-black">
        <h1 class="entry-title">
             <span>Some very, very long headline, that is very, very long.</span>
        </h1>
    </div>


h1 span {
    background: none repeat scroll 0 0 #000000;
    line-height:44px;
    padding:7px 25px 8px 25px;
}

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
}

The problem: The padding just affects the end and the beginning of the span. Where the heading is broken, the letter touch the border of the box.

I hope this is understandable. Here is the fiddle. Try to make the window small and watch, hoe it behaves.

http://jsfiddle.net/832u8/2/

Edit: I want it to be shaped like the text. As you would mark it with a felt tip. But with padding for every line.

score 2 · Answer 1 · answered Jun 28 '13 at 14:29

I'm assuming you WANT it to split to "two dark lines" in that fashion? Because if you just want a black background to your titles, that DOES retain the padding, then this simplified version will work:

<h1 class="entry-title">Some very, very long headline, that is very, very long.</h1>

h1 {
  background: #000;
  line-height:33px;
  padding: 8px 25px;
  color: #fff
}

Updated Fiddle: http://jsfiddle.net/kWgD2/

score 1 · Answer 2 · answered Jun 28 '13 at 14:47

This is the closest I can get...really hacky, I think you'll need some JS myself :(

This via:

<h1 class="entry-title"><span id="Title"><span>Some very, very long headline, that is very, very long.</span></span></h1>


#Title {
 border-left: 20px solid #000;
 display:block;
 color: #fff;
}

#Title:after {
 content:'';
 display:inline-block;
 width: 20px;
 background: #000;
}

#Title span {
 background: #000;
 padding-right: 20px;
 direction: rtl;
}

http://jsfiddle.net/8EDPN/

score 1 · Answer 3 · edited May 23 '17 at 11:50

1

What about using position:relative with a left adjustment? Prob not the best method if you're not doing the adjustments manually but at least it's a css-only solution?

Example -> http://jsfiddle.net/JnLje/358/

More info from thirtydot -> Add padding at the beginning and end of each line of text

edited May 23 '17 at 11:50

Community

1
1

answered Jun 28 '13 at 14:54

rgdigi

1,701
2
21
31

I had to modify it a bit, to exactly fit my needs, but this was what I wanted. Thank you! – Sebastian Starke Jun 29 '13 at 13:04
If someone is still interested in that topic, I found an article that covers a few methods, to do it: http://css-tricks.com/multi-line-padded-text/ – Sebastian Starke Dec 03 '13 at 19:37

G-Cyrillus · Answer 4 · 2013-06-28T14:33:13.183

0

you should set padding on h1 and/or set span as inline-block http://jsfiddle.net/832u8/9/ ( span inline-block)

 h1 span {
        background: none repeat scroll 0 0 #000000;
        line-height:44px;
        padding:7px 25px 8px 25px;
        display:inline-block;
    }

http://jsfiddle.net/832u8/3/ (padding h1)

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
padding:0 1em;
}

edited Jun 28 '13 at 14:33

answered Jun 28 '13 at 14:26

G-Cyrillus

101,410
14
105
129

Than I have a big black box. I want the box for the second line to be as long as the text, but with padding on the left. – Sebastian Starke Jun 28 '13 at 14:29
on inline element , padding-left will be on first line-only and after last letter if any padding-right is set. you'll need to wrap eachwords in span elements to achieve what you want. – G-Cyrillus Jun 28 '13 at 14:35
Is there another way to get the same effect? – Sebastian Starke Jun 28 '13 at 14:36
http://jsfiddle.net/832u8/45/ you could use js or jQuery to automate this wrapping in span action. (or server-side script). – G-Cyrillus Jun 28 '13 at 14:45
mayersdesign answers is as part of mine fr the padding on h1, was it that you where looking for : full black lines ? – G-Cyrillus Jun 28 '13 at 14:51

score 0 · Accepted Answer · answered Mar 26 '14 at 12:41

I recently found another sollution. It works in almost every browser (No IE8 and down), is easily adjustable and looks like this:

HTML

<h1>
    <span class="wrap">
        <span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span>
    </span>
</h1>

CSS

h1 {
    color:#fff;
}

.wrap {
    box-shadow: -10px 0 0 10px #000, 10px 0 0 10px #000;
}

.inner {
    background: #000;
    position:relative;
}

Padding for two-lined headline

5 Answers5

Linked