Tenho um design que quero implementar que envolve o texto do título que aparece com sua própria cor de fundo, preenchida por 10 px, sobre uma imagem, por exemplo:

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

O primeiro exemplo nesta imagem funciona bem e é simples:

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

O problema surge quando o texto transborda para outra linha; o preenchimento dos elementos de amplitude não afeta o texto nas quebras de linha; ele é processado da seguinte forma:

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

Alguém sabe de uma alternativa ou como definiria esse design para que a cor e o preenchimento do plano de fundo fossem consistente

Desde já, obrigad

Edit: eu simplifiquei o código para torná-lo conciso, mas havia perdido uma parte vital. Na verdade, é assim:

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

Com o html como:

<div class="greenbox">

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

</div>

Assim, o intervalo permanece em linha, envolto em uma âncora de posição absolut