@cracker-test

Как сделать принудительный перенос текста?

Есть несколько слов. Как сделать, чтобы текст после первого слова переносился на новую строчку? Сделать нужно без html т.е br не подойдет.
  • Вопрос задан
  • 372 просмотра
Пригласить эксперта
Ответы на вопрос 2
mizutsune
@mizutsune
Frontend Developer
Если верстка имеет примерно такой вид:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>


А нужно чтобы было так:

<p>Lorem 
ipsum dolor sit amet consectetur adipisicing elit. </p>


Тогда, увы, но средствами CSS такого эффекта добиться не выйдет. В CSS имеется псевдоэлемент ::first-letter для стилизации первой буквы в строке, но нет псевдоэлемента :first-word, который мог бы дать возможность стилизовать первое слово. Так что как вариант, можно обернуть первое слово в дополнительный тег, например в span через html руками или через JS. После чего станет доступна стилизация первого слова. Ну или всё таки вставить тег br в нужном месте.

Например можно сделать как-то так:

<p class="target">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>


const target = document.querySelector(".target");

target.innerHTML = target.innerText
     .split(" ")
     .map((w, i) => (i > 0 ? w : `<span>${w}</span>`))
     .join(" ");


.target > span:first-child {
  display: block;
}


В результате, все слова идущие после первого слова, будут на новой строке.
Ответ написан
ради "нескольких слов" проще и быстрее через br или столбец ширины слова
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы