Change The Font Size After Break Line On White Space Between Words

I found the solution how to break line on white space between words in this solution which is very helpful: Break line on white space between words .test{ text-align:center; } h1{

Solution 1:

Yes you can, target the first line to make its size bigger:

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

h1 {
  word-spacing: 9999px;
}

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

And here is another trick to create line break with word-spacing

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

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

Solution 2:

As suggested above. You can create span tags and use the pseudo class nth-child to stylise the desired 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
}