html - 标题中的每个词在他们自己的行 HTML/CSS

Question

我有一些动态标题，其设计要求每个词都在自己的行上。这是所需的外观: http://jsfiddle.net/alanweibel/2LEmF/2/ (注意每个单词的黑色背景)

我需要帮助的问题是保持上面的样式，同时将整个标题放在一个标签中。我无法在每个单词前后动态插入 H1。

我需要更改 HTML 标记

<div class="tagline">
<h1>
    Oh
</h1>
<h1>
    Look
</h1>
<h1>
    A
</h1>
<h1>
    Headline
</h1>
<h1>
    Thanks
</h1>
</div>

类似于

<div class="tagline">
    <h1>
        Oh Look A Headline Thanks
    </h1>
</div>

同时保持与上面链接中相同的样式。

提前致谢。

Answer 1

参见: http://jsfiddle.net/thirtydot/HksP2/

它在 IE9、IE8 和最新版本的 Firefox、Chrome、Safari、Opera 中看起来很完美；全部在 Windows 7 上。它在 IE7 中相当好地降级。在 Mac 上的 Safari 中，它几乎完美。

这是基于 previous answer .引用我自己的回答:

Note that the line-height and padding adjustments can be very tricky to get right.

line-height: 1.83; 看起来不错，是通过选择看起来接近你想要的东西，然后通过反复试验找到在 Chrome 和 Firefox 中都有效的东西(他们以不同方式呈现文本)。

HTML:

<div class="tagline">
    <h1><span>
        Oh Look A Headline Thanks
    </span></h1>
</div>

CSS:

.tagline {
    display: inline-block;
    width: 0;
    line-height: 1.83; 
    padding: 1px 0; 
    border-left: 20px solid #000;
}
.tagline h1 {
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    background: #000;
    display: inline;
    padding: 8px 0;
    text-transform: uppercase;
}
.tagline span { 
    position: relative;
    left: -10px;
}