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。引用自己的答案：

请注意，line-height和padding调整可能非常狡猾才能做对。

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;
}

Answer 2

我知道这样做的唯一选择就是编写一些javascript来获取<h1>oh look ..</h1>内容并将其拆分为单独的h1标记。

<强>更新

我只是想办法：http://jsfiddle.net/2LEmF/10/

基本上，您需要将背景颜色移动到主div。然后将h1上的宽度设置为强制文本沿正常文本破坏规则中断的内容。像10px这样的东西。

我不确定这会在多种浏览器上做什么，因为你实际上给的是一个小到H1的尺寸......但它可能正是你想要的。

Answer 3

您可以将h1的宽度设置为小于最小字词的宽度，例如10px的。

它产生与您的示例完全相同的结果（至少在Chrome和Firefox上）。

Jsfiddle here

Answer 4

以下是如何为每个单词获取一行的简单示例：

do it locally

<强> HTML：

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

<强> CSS：

.tagline h1 {
  display: inline-block;
  word-spacing: 100vw;
}

Answer 5

您可以使用<br />搜索和替换空格以获得此外观：

http://jsfiddle.net/WwbUL/

Answer 6

我不确定我是否理解这个问题。您的问题似乎已经停留在HTML中，但是您希望它能够在线显示吗？

如何将display:inline;添加到.tagline？

http://jsfiddle.net/XmCLd/

或者反过来呢？您有正常的HTML，但是您需要在空格处分割线条吗？

http://jsfiddle.net/GQ44u/

Answer 7

让tagline div非常精简，并使其block代替inline。然后制作h1 inline。

.tagline
{
    width: 1px;
    margin:5px;
    display: block;
}
.tagline h1
{
    color:#fff;
    background: #000;
    padding: 4px 10px;
    font-size: 20px;
    line-height: 30px;
    text-transform:uppercase;
    display: inline;
}

JSFiddle在这里。

标题中的每个单词都在自己的行HTML / CSS上

7 个答案: