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

我需要使用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：

span { display:block; }

---

当然！摆脱

，并声明此CSS：

span { display:block; }

---

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

---

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

---

将

span

s更改为

div

s并放下

br

标签

由于

span

和

div

本身没有特定的语义，

div

是块级的，

span

是内联的

块级别：

显示：块，内联：
显示：内联

使用
行高
和
字母间距
调整行与字母之间的距离


标题二{
字体系列：无衬线；
文本转换：大写；
线高：0.85；
}
#标题二>分区：第n个孩子（1）{
颜色：红色；
字体大小：50px；
字母间距：14px；
}
#标题二>分区：第n个孩子（2）{
颜色：蓝色；
字体大小：30px；
字母间距：2px；
}
#标题二>分区：第n个孩子（3）{
颜色：绿色；
字体大小：40px；
}

伟大的
经历
对于用户
将
span
s更改为
div
s并放下
br
标签

由于
span
和
div
本身没有特定的语义，
div
是块级的，
span
是内联的

块级别：
显示：块，内联：
显示：内联

使用
行高
和
字母间距
调整行与字母之间的距离


标题二{
字体系列：无衬线；
文本转换：大写；
线高：0.85；
}
#标题二>分区：第n个孩子（1）{
颜色：红色；
字体大小：50px；
字母间距：14px；
}
#标题二>分区：第n个孩子（2）{
颜色：蓝色；
字体大小：30px；
字母间距：2px；
}
#标题二>分区：第n个孩子（3）{
颜色：绿色；
字体大小：40px；
}

伟大的
经历
对于用户
对于线条高度的差异，我建议h2使用小字体，跨度使用
线条高度：1ex

如果您不想担心

的数量，那么首先用
span
将所有跨度作为目标，然后用
:first child
和
:last child
对这两个跨度进行详细说明。那么，是否存在

就无关紧要了


标题二{
字体：粗体12px“Arial窄体”；
字体变体：小大写字母；
}
#标题二>跨度{
字体大小：60px；
线高：1ex；
}
#标题二：第一个孩子{
字号：125px；
}
#标题二>跨度：最后一个孩子{
字体大小：73px；
}

伟大的


经历


对于用户
对于线条高度的差异，我建议h2使用小字体，跨度使用
线条高度：1ex

如果您不想担心

的数量，那么首先用
span
将所有跨度作为目标，然后用
:first child
和
:last child
对这两个跨度进行详细说明。那么，是否存在

就无关紧要了


标题二{
字体：粗体12px“Arial窄体”；
字体变体：小大写字母；
}
#标题二>跨度{
字体大小：60px；
线高：1ex；
}
#标题二：第一个孩子{
字号：125px；
}
#标题二>跨度：最后一个孩子{
字体大小：73px；
}

伟大的


经历


对于用户
你能详细说明一下“难以控制”吗？你所说的分离元素是什么意思？使用span{diplay:block}并使用单词间距和行高与对齐的文本如果你不想更改HTML（我建议你更改并删除
标记），请使用第n个类型而不是第n个子类型。然后您可以将它们索引为1、2和3，以便于控制，因为

添加了空间，而且每个元素都位于一个单独的
元素上，因此
行高
不符合我的要求。为了更加清晰，我编辑了代码和示例。谢谢你能详细说明一下“难以控制”吗？你所说的分离元素是什么意思？让span{diplay:block}并使用单词间距和行高与对齐的文本如果你不想更改HTML（我建议你更改并删除
标记），请使用第n个类型而不是第n个子类型。然后您可以将它们索引为1、2和3，以便于控制，因为

添加了空间，而且每个元素都位于一个单独的
元素上，因此
行高
不符合我的要求。为了更加清晰，我编辑了代码和示例。谢谢我正在寻找一个更“手工”的解决方案使用CSS，但你的建议真的很有趣。当然，我会检查一下。我想用CSS寻找一个更“手工”的解决方案，但你的建议真的很有趣。我一定要检查一下。