Html 在单词之间的空白处换行后更改字体大小

我在这个解决方案中找到了如何在单词之间的空白处断线的解决方案，这非常有帮助：

.test{
文本对齐：居中；
}
h1{
字距：9999px；
}
分开这个

但是，我可以在断线后更改css中的字体大小吗？？？示例如下：

---

如上所述。您可以创建span标记，并使用伪类nth child设置所需span的样式

<div class="test">
  <span class="text">split</span>
  <span class="text">this</span>
</div>

.test {
  text-align: center;
}
.test .text {
  display: block;
  font-size: 1rem;
}
.test .text:nth-child(2) {
  font-size: 3rem
}

分裂
这
.测试{
文本对齐：居中；
}
.test.text{
显示：块；
字号：1rem；
}
.测试.文本：第n个子项（2）{
字号：3rem
}

是的，您可以将第一行作为目标，使其更大：

.test{
文本对齐：居中；
字号：8px；
}
.测试：一线{
字体大小：40px；
}
h1{
字距：9999px；
}

分开这个

<div class="test">
  <span class="text">split</span>
  <span class="text">this</span>
</div>

.test {
  text-align: center;
}
.test .text {
  display: block;
  font-size: 1rem;
}
.test .text:nth-child(2) {
  font-size: 3rem
}