Как из js разорвать строку?

Question

[KononovD]

Здравствуйте, есть вот такая ситуация:

( на картинке "как должно быть" )

Заголовок приходит одной строкой и "Мы вам" остается на первой строчке. Я могу, конечно, повесить в компоненте листнер на ресайз окна, и как только у меня будет Npx в ширину заменить 13й символ в строке ( пробел после `?` ) на `\n`, но мне кажется, что это очень "не очень" способ..

Answer 1

[Антон Спирин]

.header {
  white-space: pre-line;
}

Демо.

Comments

[KononovD]

И получать строку уже с переносом строки, гениально, спасибо

Answer 2

[Guccigang]

Использовать тег br не вариант?

Comments

[KononovD]

текст приходит с сервера)

<h2 className="second-title callback-form__title">
  { title }
</h2>

да и /br безнадежно устарел)

[Ankhena]

KononovD,

да и /br безнадежно устарел)

это кто вам сказал?
Есть какой-то новый тег для переноса строки?

Опять же есть неразрывные пробелы. Но в данном случае br логичнее.

[Guccigang]

KononovD, ну пусть тогда бэкенд присылает сразу в годном варианте)

[KononovD]

Ankhena,

это кто вам сказал?

Не помню уже где я это увидел.

Есть какой-то новый тег для переноса строки?

Блочные теги же для этого есть.

[Ankhena]

KononovD, вообще-то они не для этого

[KononovD]

Ankhena, Окей, немного погуглив, я нашел, что св-во clear тега br убрали из стандарта в html5, сам же br все еще входит в стандарт.

[Ankhena]

KononovD,
атрибут, не свойство

pre-line хорошо, но ненадежно. До тех пор, пока кому-то в голову не придет минифицировать html или типа того.
С другой стороны, сейчас подходит и славно.

[KononovD]

Ankhena, да, атрибут, оговорка. никогда html не минифицировал.
в любом случае получаю с сервера "Есть вопрос?\n Мы вам перезвоним" и в медиа запросе делаю white-space: pre-line и готово

Answer 3

[Алексей]

Добавить средствами js тег br внутри заголовка

Comments

[KononovD]

можно чуть более развернутый ответ?

[irishmann]

KononovD, поставить
вместо \n\

[KononovD]

<h2 className="second-title callback-form__title">
  { title }
</h2>

особо некуда добавлять) Тот вариант, что я описывал выше слишком коряв, мне кажется

[Алексей]

Не важно что приходит с сервера. В браузере все в виде DOM элементов и текста. Применяйте скрипт вставки тега br после загрузки и построения всей страницы

Answer 4

[Andrey Suha]

Попробуйте css на брекпомнте уменьшить размер строки

Comments

[KononovD]

Пробовал, т.к. "Есть вопрос?" явно короче, чем "Мы вам перезвоним" - при уменьшении получится либо
`Есть вопрос? Мы`
`вам перезвоним` , либо
`Есть вопрос?`
`Мы вам`
`перезвоним`

Answer 5

[Ziggy Pop]

Воткнуть неразрывные пробелы между словами второй строки, как вариант