Как перенести текст на новую строку в определенном месте для мобильных устройств?

Question

[Антон Козлов]

Добрый день,

Имеется заголовок, который на устройствах с большим экраном отображается одной строкой:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 При просмотре страницы с мобильных устройств, заголовок разбивается на 2 строки, т.е. выглядит так:

Lorem ipsum dolor sit amet, consectetur 
adipiscing elit.

В примере выше, какой CSS код можно было бы применить, чтобы слово "consectetur" отображалось на новой строке при просмотре с мобильных устройств, т.е.:

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.

Пробовал word-wrap: break-word; к сожалению не срабатывает.

Благадорю за помощь!

Answer 1

[Роман Макаров]

<br class="br">

.br { display: none }
@media only screen and (max-width: 479px) {
  .br {display: inline }
}

Comments

[Антон Козлов]

прекрасно! спасибо большое!

Answer 2

[Радость моя]

https://jsfiddle.net/4508drub/ как вариант, если именно после определенного слова надо делать разрыв.

Comments

[Антон Козлов]

Благодарю Вас! Прекрасное и просто решение. Спасибо!

[Радость моя]

Пожалуйста :)