Question

我需要这样做，使用CSS（左边的那个是预期的设计，右边的那个是实际输出）

现在我正在尝试使用此标记来实现此目的

        <div class="layout__in-block">
            <h2 id="title__two" class="presentation__big-titles">
                <span>great</span>
                <br/>
                <span>experiences</span>
                <br/>
                <span>for users</span>
            </h2>
        </div>

然后，在CSS中使用类似的东西来设置文本

#title__two > span:nth-child(1) {
    font-size: 117px;
}

#title__two > span:nth-child(3) {
    font-size: 56px;
}

#title__two > span:nth-child(5) {
    font-size: 73px;
}

但问题是每个 内的和分隔元素难以控制。

有关如何解决此问题的任何建议？欢迎任何有关该代码的其他建议。

Answer 1

将span更改为div并删除br代码。

由于span和div都没有自己的特定语义，divs是块级，spans是内联的。

块级：display: block;，内联：display: inline

使用line-height和letter-spacing调整行和字母之间的距离。

＆＃13;

#title__two {
    font-family: sans-serif;
    text-transform: uppercase;
    line-height: 0.85;
}

#title__two > div:nth-child(1) {
    color: red;
    font-size: 50px;
    letter-spacing: 14px;
}

#title__two > div:nth-child(2) {
    color: blue;
    font-size: 30px;
    letter-spacing: 2px;
}

#title__two > div:nth-child(3) {
    color: green;
    font-size: 40px;
}

＆＃13;

<div class="layout__in-block">
  <h2 id="title__two" class="presentation__big-titles">
    <div>great</div>
    <div>experiences</div>
    <div>for users</div>
  </h2>
</div>

＆＃13;

Answer 2

当然！摆脱 并声明这个CSS：

span { display:block; }

Answer 3

对于行高的差异，我建议为h2使用较小的字体大小，为跨距使用line-height:1ex。

如果您不想担心 的数量，请首先定位仅span的所有范围，然后使用:first-child，然后:last-child。 1}}具有这两个跨度的细节。然后，如果有 ，则无关紧要。

#title__two {
  font: bold 12px 'Arial Narrow';
  font-variant: small-caps;
}
#title__two > span {
  font-size: 60px;
  line-height:1ex;
}
#title__two > span:first-child {
  font-size: 125px;
}
#title__two > span:last-child {
  font-size: 73px;
}

<div class="layout__in-block">
  <h2 id="title__two" class="presentation__big-titles">
    <span>great</span>
    <br/>
    <span>experiences</span>
    <br/>
    <span>for users</span>
  </h2>
</div>

Answer 4

为了达到你所追求的最终效果，你可能想要做一些更有活力的事情。这样做有一些很棒的js解决方案。看看：

混合大小的CSS文本在不同的行中

4 个答案: