Как вывести каждое слово с новой строки

Опубликовано 6 лет назад

Кастомизация обновляемых шаблонов интересна тем, что для решения многих тривиальных задач приходится проявлять смекалку. Я недавно рассказывал, как изменить стиль некоторых элементов в тексте без внесения изменений в HTML-код. Сегодня продолжу и покажу, как вывести все слова с новой строки.

Согласитесь, открыть исходный код и проставить тег BR после каждого слова немного скучно. Тем более с обновляемыми темами этот способ не пройдет. Потому что после очередного обновления все изменения, внесенные непосредственно в код темы, просто пропадут. Если же изменения жизненно необходимы, можно подключить дочернюю тему или написать плагин с хуком, который будет перехватывать вывод. Там тоже куча нюансов, но сегодня не о них.

Многие задачи фронтенда чаще всего решаются с помощью одного лишь CSS. В некоторых случаях вкупе с JavaScript. И это самый оптимальный путь.

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

p {
	word-spacing: 9999px;
}

И все — никаких BR, никакой магии.

Иван Данилин
Автор Иван Данилин

Фулстек веб‑разработчик, специализируюсь на платформе WordPress

Подробнее
Комментарии
Добавить комментарий