Свойство white-space — разрывы строк длинного текста, пробелы между словами

Свойство white-space устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат Enter при наборе кода).

Синтаксис

селектор { white-space: nowrap | pre | pre-line | pre-wrap | normal; }

Значения

Значение Описание
nowrap Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку.
pre Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер — текст просто вылезет за его границы.
Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство font-family).
pre-wrap То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку.
pre-line Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк).
normal Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране.

Значение по умолчанию: normal.

Пример .

Значение nowrap

В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение nowrap:

<div> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div>#elem { width: 200px; white-space: nowrap; border: 1px solid red; }

:

Пример . Значение nowrap и тег br

Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br):

<div> Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire. </div>#elem { width: 200px; white-space: nowrap; border: 1px solid red; }

:

Пример . Значение pre

В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab, с Enter и так далее):

<div> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.

</div>#elem { width: 200px; white-space: pre; border: 1px solid red; }

:

Пример . Значение pre-wrap

А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:

<div> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div>#elem { width: 200px; white-space: pre-wrap; border: 1px solid red; }

:

Смотрите также

  • свойства word-break и overflow-wrap,
    которые позволяют перенести буквы длинного слова на новую строку
  • свойство tab-size,
    которое устанавливает размер отступа, созданного клавишей Tab
  • свойство hyphens,
    которое включает переносы слов по слогам
  • свойство overflow,
    которое обрезает вылезающие за границу блока части
  • тег pre,
    который показывает текст так, как он был набран в редакторе HTML кода

| HTML | WebReference

  • Содержание
    • Синтаксис
    • Закрывающий тег
    • Атрибуты
    • Пример
    • Спецификация
    • Браузеры

Элемент <br> (от англ. line break — перенос строки) устанавливает перевод строки в том месте, где он находится. В отличие от элемента <p>, использование <br> не добавляет пустой отступ перед строкой.

Синтаксис

Текст<br> текст

Закрывающий тег

Не требуется.

Атрибуты

clear
Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает элемент.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>BR</title> </head> <body> <p>Р.Л. Стивенсон</p> <p>Лето в стране настало,<br> Вереск опять цветёт.<br> Но некому готовить<br> Вересковый мёд.</p> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста при использовании <br>

Спецификация

Спецификация Статус
WHATWG HTML Living Standard Живой стандарт
HTML5 Рекомендация
HTML 4.
01 Specification
Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

3 12 1 3.5 1 1
1 1 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Форматирование HTML

Практика

  • Важный текст
  • Переносы строк

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09. 10.2018

Редакторы: Влад Мержевич

разрывов строк в HTML —

— Qaru спросил

Изменено 13 лет назад

Просмотрено 4к раз

Что считается «лучшей» практикой:

(где clr ясно:оба) или просто:

 

Я действительно запутался, так как однажды мне сказали никогда не использовать BR, но тогда BR предназначен для того, чтобы быть тем, чем является класс div?

Вопрос:

Было бы неправильно просто использовать
, когда вы хотите очистить, или я должен использовать div?

Заранее спасибо

редактировать: я уже прочитал http://www.w3.org/TR/html4/appendix/notes.html#notes-line-breaks и http://www.w3. org/ Пример TR/html4/struct/text.html#edef-BR

(обратите внимание, что я удалил классы и добавил стиль прямо в html для удобства чтения):

 <дел>
    thumb
Текст заголовка <дел> Длина: продолжительность здесь <дел> текст описания <дел> Дата: дата добавления сюда

По вашему экспертному мнению, правильно ли я использую span, div и т.д.? Должен ли я использовать BR вместо Div для перерывов.

Спасибо всем

Завершающее примечание:

Спасибо всем за указание на то, что разрыв строки не имеет ничего общего с очисткой поплавков. Мне нужно точно узнать, что такое разрыв строки… Наверное, я не знаю.

Спасибо Фредди за то, что он увидел, что я на самом деле хотел сделать, и дал мне решение, о котором я неуклюже просил.

3

Ничего из вышеперечисленного. Лучшей практикой является использование HTML для структурирования информации.

Итак, вы используете div для размещения раздела информации на странице. Если вам нужен разрыв строки после этой информации, вы можете использовать CSS для его оформления.


 <дел>
   

некоторый абзац информации

<ул>
  • элемент списка
  • другой элемент
  • еще один элемент