zakresowe background-color & napawające problemy

Question

Mam projekt Chcę zaimplementować, która obejmuje tytułowy tekst pojawiający się z własnym kolorem tła, wyściełany przez 10px, na obrazie, par przykład:

http://i.stack.imgur.com/E7EpS.png

pierwszy przykład na tym zdjęciu dobrze działa i jest prosty:

.greenbox {width:520px; height:261px; position:relative;} 
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; } 

Problem powstaje, gdy tekst przelewa na innej linii, wówczas wyściółka elementy przęseł nie ma wpływu na tekst na podziały wiersza, to czyni tak:

http://i.stack.imgur.com/pY18f.png

Każdy użytkownik wie alternatywa, czyli jak oni ustawić ten projekt się tak, że kolor tła & wyściółka była spójna?

góry dzięki

EDIT: Miałem uproszczony kod, aby to zwięzły, ale przeoczył istotną rolę. W rzeczywistości to w następujący sposób:

.greenbox {width:520px; height:261px; position:relative;} 
.greenbox a {position:absolute; left:0; bottom:40px; } 
.greenbox span { padding:0 10px; background:#000; } 

Z HTML jak:

<div class="greenbox"> 

    <a href="link"><span>The Title Goes Here</span></a> 

</div> 

Zatem przedział pozostaje rolki, owinięte w bezwzględne położenie kotwicy.

Answer 1

mam rozwiązać coś podobnego wcześniej: Add padding at the beginning and end of each line of text

mam okradziony to rozwiązanie od siebie i dopasować go do swojej sprawy.

Należy pamiętać, że korekty line-height i padding mogą być bardzo trudne do uzyskania .

Patrz:http://jsbin.com/ahoyug

HTML:

<div class="greenbox"> 
    <a href="#"><span><span> 
     The Title Goes Here, with overflow 
    </span></span></a> 
</div> 

CSS:

.greenbox {width:500px; height:200px; position:relative; background:green} 

.greenbox > a { 
    font: 50px sans-serif; 
    line-height: 1.14; 
    padding: 0; 
    border-left: 20px solid #000; 
    position: absolute; 
    left: 0; 
    bottom: 60px; 
    text-decoration: none; 
    color: #fff 
} 
.greenbox > a > span { 
    background: #000 
} 
.greenbox > a > span > span { 
    position: relative; 
    left: -10px 
} 

Answer 2

Nieco łatwym sposobem jest dodanie border po lewej stronie link i następnie dodaj dwa wr appers, następnie ustaw najpierw na lewo, a drugi z powrotem na prawo, więc chciałby w jakiś sposób: http://jsfiddle.net/kizu/fNGgN/4/