Сделать половину заголовка в две строки?

Question

[Corepro]

Как правильно сделать такой заголовок ?

Comments

[Froggyweb]

разметкой, картинкой с атрибутами, скрытым заголовком и картинкой
вариант с разметкой - так себе,геморр получишь, а на следующем слайде все поломается. важно понимать что планируется дальше. Не все надо верстать.

[Aetae]

В чём проблема то? Это можно сделать в лоб любым способом вёрстки, от float и table до flex и grid. Как настроить размеры текста? Только ручками подобрать и никак иначе. Хорошо если на макете уже подобрали за вас.

[Варлам Ерофеич]

В шапку страницы пишем

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>

- Пробуем...

Answer 1

[Frontend developer]

https://jsfiddle.net/3m6yu48c/2/

<h1 class="title">
    <span class="title__w1">корм</span>
    <span class="title__w2">для</span>
    <span class="title__w3">домашних</span>
    <span class="title__w4">кроликов</span>
</h1>

.title {
  display: grid;
  grid-template-areas: 
    "w1 w2"
    "w1 w3"
    "w4 w4";
    grid-template-columns: auto 1fr;
    
    &__w1{
      grid-area: w1;
      font-size: 2.5em;
    }
    
    &__w2{
      grid-area: w2;
    }
    
    &__w3{
      grid-area: w3;
    }
    
    &__w4{
      grid-area: w4;
      font-size: 2em;
    }
}