Tengo un diseño que quiero implementar que implica que el texto del título aparezca con su propio color de fondo, rellenado con 10 píxeles, sobre una imagen, por ejemplo:

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

El primer ejemplo en esta imagen funciona bien y es simple:

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

Trouble surge cuando el texto se desborda en otra línea, luego el relleno de elementos de extensión no afecta el texto en los saltos de línea, se representa así:

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

¿Alguien sabe de una alternativa, o cómo establecerían este diseño para que el color de fondo y el relleno fueran consistentes?

Gracias por adelantad

Edit: había simplificado el código para hacerlo conciso, pero me había perdido una parte vital. En realidad es así:

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

Con el html como:

<div class="greenbox">

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

</div>

e este modo, el tramo permanece en línea, envuelto en un ancla de posición absoluta.