Многострочный заголовок с цветом фона шириной текста

Question

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

http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png

до сих пор все решения, которые я нашел только появляются работать на фоне с однотонным цветом, кто-нибудь есть какие-либо идеи, как я могу добиться этого?

Answer 1

Что ваш просят за старый вопрос, который пришел снова и снова, как в то время, текст или строкового элемента не может достичь этого, элемент отформатированный как коробка получится быть квадратным или прямоугольник.

Единственный способ сделать это - установить бок о бок элементы встроенного блока, обертывающие слова или группы слов.

Сценарий-сервер или javascript могут вам помочь, поэтому вам не нужно не учитывать разметку текста при наборе текста.

Идея выглядит следующим образом: http://jsfiddle.net/rnCTL/

h1 span { 
     background: #fff; 
     line-height:44px; 
     padding:4px 4px 4px 10px; 
     margin:0; 
     display:inline-block; 
    } 
    .headline-black { 
     height:219px; 
     width:367px; 
     background:url(http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png); 
     padding:40px; 
     box-sizing:border-box; 
    } 

Answer 2

Я сделал это в ситуациях, когда вы помещаете <span> в тег заголовка и применяете к нему цвет фона. Имейте в виду, что у вас не будет прокладки, где разрывается линия: ознакомьтесь с этой скрипкой - http://jsfiddle.net/R5ZsG/

Если вы можете поставить &nbsp, который будет работать на место, где он сломается, но вы можете не иметь полного контроля над ним.

Answer 3

Попробуйте это.

В принципе, если у вас есть элемент фона, вы можете использовать любой элемент поверх него с другим фоном. Check out the Fiddle

h1{ 
    width:200px; 
    background:white; 
    display:inline-block; 
    margin-left:60px; 
}