Проблемы с цветом фона и заполнением

У меня есть проект, который я хочу реализовать, который включает в себя текст заголовка со своим собственным цветом фона, дополненным 10px, над изображением, пример:

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

Первый пример на этом рисунке хорошо работает и прост:

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

Неисправность возникает, когда текст переполняется на другую строку, тогда прокладка элементов span не влияет на текст на разрыве строки, он выглядит следующим образом:

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

Кто-нибудь знает альтернативу или как они будут устанавливать этот дизайн так, чтобы цвет фона и дополнение были согласованы?

Заранее спасибо

Изменить: я упростил код, чтобы сделать его кратким, но пропустил жизненно важную роль. На самом деле это так:

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

С html как:

<div class="greenbox">

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

</div>

Таким образом, диапазон остается встроенным, завернутым в якорь абсолютного положения.

Ответ 1

Я решил что-то подобное раньше: Добавить дополнение в начале и конце каждой строки текста

Я ограбил это решение от себя и приспосабливаю его к вашему делу.

Обратите внимание, что настройки line-height и padding могут быть очень сложными, чтобы получить право.

Смотрите: 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
}

Ответ 2

Несколько простой способ - добавить border влево от ссылки, а затем добавить две обертки, затем поместить сначала влево, а вторую назад вправо, чтобы это как-то так: http://jsfiddle.net/kizu/fNGgN/4/