Перенос строки в CSS без использования тега <br>

Быстрый ответ

Для детального контроля над текстом без использования <br /> назначьте свойство CSS white-space: pre-line;. Оно обеспечивает автоматический перенос текста, при этом учитывая исходные разрывы строк.

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

Примените класс .line-break к элементу, который вам нужен:

<p class="line-break">
Этот текст автоматически переносится на новые строки, сохраняя уже существующие разрывы. Удобно, не так ли?
</p>

Последующие изменения будут сохранять чистоту вашего HTML-кода, управляя при этом визуальным представлением текста.

Практические способы создания переносов строк

Обзор свойства white-space

Свойство white-space контролирует поведение текста:

• pre: Сохраняет все пробелы и переносы на новую строку, служит как архив.
• pre-wrap: Сочетает в себе практичность и эстетичность. Сохраняет форматирование и обеспечивает качественное представление текста.
• nowrap: В этом режиме переносы строк отсутствуют! Текст расширяется, словно обеденный стол для большой вечеринки.
• normal: Пробелы соединяются, новые строки добавляются, когда свободного места становится недостаточно.
• inherit: Это свойство наследует значение от его родительского элемента.

Выберите где применять white-space в зависимости от структуры текста и свободного пространства.

Подробнее об этом расскажет наш спикер на видео

Роль display

Превратите <span> и другие строчные элементы в блочные, и они станут обладать функцией переноса на новую строку, используйте display: block;.

.block-span {
  display: block; /* И у вас появятся переносы строк! */
}

Адаптивный дизайн: <br> и медиазапросы

С помощью медиазапросов вы можете спрятать <br> в тех случаях, когда они не нужны, для создания адаптивного дизайна.

@media (max-width: 600px) {
  br {
    display: none; /* Скрыть! */
  }
}

CSS content для добавления переносов

Псевдоэлементы с свойством content могут быть использованы для создания переносов строк без модификации HTML, это как VIP-пропуск в закрытый клуб.

.break-after::after {
  content: "\A"; /* \A – это специальный код для переноса строки */
  white-space: pre;
}

Усилите воздействие, применяя атрибуты селекторов:

[data-break]:after {
  content: attr(data-break) "\A"; /* Очень удобные переносы строк! */
  white-space: pre;
}

Использование   для предотвращения разрывов

Неразрывный пробел   формирует цельный текстовый блок, как неразрывная основа в музыкальной композиции.

Визуализация

Вот визуальная аналогия переносов строк в CSS, представим поезд (🚂):

Маршрут поезда: ----🚂====🛤====🛤====🛤
Станции:        [Блок 1] [Блок 2] [Блок 3]

С white-space: pre-wrap; поезд останавливается на всех станциях текстового блока:

.content-box {
  white-space: pre-wrap; /* Создать переносы строк! */
}

Результат: Слова перемещаются между станциями и формируют новые строки! 🚂💭⏩🛤

Упрощение HTML-структуры без ущерба для CSS

В вопросах веб-разметки "меньше" часто значит "лучше". Уменьшите использование HTML-элементов, чтобы создать более чистое поле для действий CSS.

Использование псевдоэлементов для стилистических изменений

Практикуйте использование псевдоэлементов, таких как ::before и ::after, для внедрения стилевых переносов строк, не изменяя при этом HTML.

.quote:before {
  content: "❝"; /* Элегантный начало цитаты */
}
.quote:after {
  content: "❞"; /* И заключение в том же стиле */
}

Такие псевдоэлементы дают интересные способы для внедрения структуры и отдыха внутри текста, украшая его дополнительными элементами.

Практика применения на jsfiddle

Помните, лучший способ научиться — это практика. Используйте интерактивные платформы, такие как jsfiddle, чтобы протестировать такие решения, как white-space и псевдоэлементы.

Полезные материалы

1. word-break | CSS-Tricks — Подробно изучите свойство word-break.
2. line-break – CSS: Cascading Style Sheets | MDN — MDN подробно рассматривает CSS-свойство line-break.
3. CSS word-wrap property — W3 Schools предоставляет практические примеры использования word-wrap.
4. Can I use... Support tables for HTML5, CSS3, etc — Проверьте совместимость свойства CSS word-break с различными браузерами.
5. Newest 'css+line-breaks' Questions – Stack Overflow — Обсуждения и решения по созданию переносов строк в CSS на Stack Overflow.
6. CSS white-space Property – CSS Portal — Всё о свойстве white-space в одном месте!