Как я могу переместить на новую строку последнее слово предложения <h1> на мобильном телефоне, а в режиме рабочего стола разбить предложение на 3 строки?

Question

У меня есть макет, который мне дал дизайнер, и я должен имитировать его, используя HTML и CSS.Есть название, которое должно выглядеть следующим образом: на рабочем столе:

Развивайте свой

бизнес

быстрее

, а в мобильном -это должно выглядеть так:

Развивайте свой бизнес

быстрее

Я не смог найти способ сделать это.

Можете ли вы дать мне подсказку?

Спасибо.

Я пробовал с разрывом слов, но пока не увенчался успехом.

Answer 1

Вы можете использовать тег <br> в <span>, для которого вы устанавливаете правило CSS и медиа-запрос, показывающий / скрывающий его:

.a {
 display: none;
}
@media screen and (min-width: 480px) {
 .a {
  display: inline;
 }
}

<h1>Grow your <span class="a"><br></span>business<br>faster</h1>

Answer 2

Свойство word-break указывает , как слова должны ломаться при достижении конца строки.

Вы можете использовать комбинацию HTML и CSS

@media screen and (max-width: 768px) {
  #title span {
    display: block;
  }
}

<div id="title">
  Grow your <span>business</span>
</div>

Answer 3

Попробуйте

<style>
      @media screen and (max-width: 467px){
          .newline{
               display:block;
                    }
                      }
          </style>
    <p>Grow your <span class="newline">business</span></p>