Измените размер шрифта после строки разрыва на пробеле между словами

Question

Я нашел решение, как разбить строку на пробеле между словами в этом решении, что очень полезно: Разрыв строки на пробеле между словами

.test{
text-align:center;
}
h1{
word-spacing:9999px;
}

<div class="test">
<h1>split this</h1>
</div>

Однако можно сделать Я меняю размер шрифта в css после разрыва строки ??? пример ниже: Пример

Answer 1

Да, вы можете настроить таргетинг на первую строку, чтобы увеличить ее размер:

.test {
  text-align: center;
  font-size:8px;
}
.test:first-line {
  font-size:40px;
}

h1 {
  word-spacing: 9999px;
}

<div class="test">
  <h1>split this</h1>
</div>

А вот еще один трюк для создания разрыва строки с помощью word-spacing

.test {
  width:min-content;
  margin:auto;
  text-align: center;
  font-size:8px;
}
.test:first-line {
  font-size:40px;
}

<div class="test">
  <h1>split this</h1>
</div>

Answer 2

Как предложено выше. Вы можете создавать теги span и использовать псевдокласс nth-child для стилизации желаемого диапазона.

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