Перенос строки с помощью css?

Question

[Ruslan]

Подскажите пожалуйста как сделать перенос слов, если я получаю данные в массиве и не могу добавить span, тоесть разметка такого плана {text}. Тоесть мне нужно оставить только первое слово на первой строке, а остальные перенести на следущую. Выглядеть все должно вот так

Comments

[SuperToster]

К сожалению, с помощью CSS выбрать первое слово нельзя.

Из вариантов:
— обернуть в дескриптор (вам как я понял не подходит)
— или ограничить ширину блока в котором размещён текст (не самое оптимальное решение), но за неимением лучшего...

[Ankhena]

Почему вы не можете br указать в тексте?

[SuperToster]

Ankhena,

...если я получаю данные в массиве и не могу добавить span...

[Ankhena]

SuperToster, вряд ли это ответ на вопрос, почему не может...

[Ruslan]

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

[Ruslan]

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

[SuperToster]

Ankhena, это совершенно точно — ответ. Капля логики и опыта подскажет, что если данные получают откуда то, редактирует их тот кто их отдаёт, а не тот кто получает.

[Сергей delphinpro]

Ruslan, вы очень даже можете обработать свои входящие строки, и после первого слова вставить br.
На CSS задача не решается.

Answer 1

[ThunderCat]

если я получаю данные в массиве и не могу добавить span, тоесть разметка такого плана {text}.

Если вы получаете данные в массиве, значит вы можете сделать с этими данными все что угодно. То что в шаблоне они в итоге будут представлены псевдокодом разметки, будет уже не важно, если вы, перед передачей в шаблон, обработаете их любым желаемым способом. Естественно на чистом цсс отделить первое слово нельзя (по крайней мере в текущем стандарте).

Если добавить после первого слова \n и задать блоку с текстом white-space: pre-line;, как раз получите свое первое слово в первой строке.

Comments

[Ruslan]

Супер, сработало. Спасибо большое, а то уже кучу вариантов перепробывал и ничего не помагало

Answer 2

[Андрей Федоров]

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

const arr = [
`Введите
телефон`,
];

Во-вторых, если вы подставляете в код значения из массива как html, то можно использовать html-теги:

const arr = [
'Введите<br>телефон',
];