Перенос слов на новую строку css стилями можно реализовать несколькими путями.
Задача – из текста выделить группу слов и вывести их с новой строки.
Решение:
- Задать обертку для группы слов. Оберткой могут выступать теги: p, span, div
- В css указать display: block;
После разметки текста будет осуществлен перенос слов на новую строку силами css, без использования тега переноса.
Задача становится гораздо сложнее, когда смысл заключается в переносе каждого слова на новую строку. Можно использовать метод выше, но код станет избыточным.
В css перенести слово на новую строку позволяет свойство word-spacing. Прямое назначение этого свойства – задать интервал между словами. Этим можно воспользоваться.
Пример реализации
See the Pen
Как сделать каждое слово с новой строки css? by Alex (@alex_voit)
on CodePen.
Как видно из примера выше, значение стиля принудительно устанавливает размер отступа между словами в 100% ширины экрана, что позволяет через css перенести слово на новую строку без изменения разметки сайта.
