Свойство white-space

`;document.write(t),showTopNotification()}}
  • ARعربي
  • ENEnglish
  • ESEspañol
  • FAفارسی
  • FRFrançais
  • IDIndonesia
  • ITItaliano
  • JA日本語
  • KO한국어
  • RUРусский
  • TRTürkçe
  • UKУкраїнська
  • ZH简体中文

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

Набор накурсы

КупитьEPUB/PDF

3 июля 2019 г.

Свойство white-space позволяет сохранять пробелы и переносы строк.

У него есть два известных значения:

  • white-space: normal – обычное поведение
  • white-space: pre – текст ведёт себя, как будто оформлен в тег pre.

Но браузеры поддерживают и другие, которые также бывают очень полезны.

Встречаем первую «сладкую парочку» – pre и nowrap.

Оба этих значения меняют стандартное поведение HTML при работе с текстом:

pre:

  • Сохраняет пробелы.
  • Переносит текст при явном разрыве строки.

nowrap

  • Не сохраняет пробелы.
  • Игнорирует явные разрывы строки (не переносит текст).

Оба этих значения поддерживаются кросс-браузерно.

Их основной недостаток – текст может вылезти из контейнера.

Для примера, рассмотрим следующий фрагмент кода:

if (hours > 18) {
      // Пойти поиграть в теннис
}

white-space: pre:

<style>
  div { font-family: monospace; width: 200px; border: 1px solid black; }
</style>
<div>if (hours > 18) {
      // Пойти поиграть в теннис
}
</div>

Здесь пробелы и переводы строк сохранены. В HTML этому значению white-space соответствует тег PRE.

white-space: nowrap:

<style>
  div { font-family: monospace; width: 200px; border: 1px solid black; }
</style>
<div>if (hours > 18) {
      // Пойти поиграть в теннис
}
</div>

Здесь переводы строки проигнорированы, а подряд идущие пробелы, если присмотреться – сжаты в один (например, перед комментарием //).

Допустим, мы хотим разрешить посетителям публиковать код на сайте, с сохранением разметки. Но тег PRE и описанные выше значения white-space для этого не подойдут!

Злой посетитель Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы.

Можно скрыть вылезшее значение при помощи overflow-x: hidden или сделать так, чтобы была горизонтальная прокрутка, но, к счастью, есть другие значения white-space, специально для таких случаев.

pre-wrap
То же самое, что
pre, но переводит строку, если текст вылезает из контейнера.
pre-line
То же самое, что pre, но переводит строку, если текст вылезает из контейнера и не сохраняет пробелы.

Оба поведения отлично прослеживаются на примерах:

white-space: pre-wrap:

<style>
  div { font-family: monospace; width: 200px; border: 1px solid black; }
</style>
<div>if (hours > 18) {
      // Пойти поиграть в теннис
}
</div>

Отличный выбор для безопасной вставки кода посетителями.

white-space: pre-line:

<style>
  div { font-family: monospace; width: 200px; border: 1px solid black; }
</style>
<div>if (hours > 18) {
      // Пойти поиграть в теннис
}
</div>

Сохранены переводы строк, ничего не вылезает, но пробелы интерпретированы в режиме обычного HTML.

Предыдущий урокСледующий урок

Поделиться

Карта учебника

  • © 2007—2023  Илья Кантор
  • о проекте
  • связаться с нами
  • пользовательское соглашение
  • политика конфиденциальности

white-space | WebReference

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre>, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу <pre>, но в отличие от него не меняет шрифт на моноширинный.

Краткая информация

Значение по умолчаниюnormal
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}
Повторять не менее A, но не более B раз.		<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

normal
Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление <br> переносит текст на новую строку.
pre
Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML.
Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
pre-line
В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
pre-wrap
В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.

Действие значений на текст представлено в табл. 1.

Табл. 1. Перенос текста и пробелы при разных значениях white-space
ЗначениеПеренос текстаПробелы
normalПереноситсяНе учитываются
nowrapНе переноситсяНе учитываются
preНе переноситсяУчитываются
pre-lineПереноситсяНе учитываются
pre-wrapПереноситсяУчитываются

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>white-space</title> <style> .
example { border: 1px dashed #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: «Courier New», Courier, monospace; /* Семейство шрифта */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы */ white-space: pre; /* Учитываются все пробелы и переносы */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Отображать как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ margin: 0; /* Убираем отступы */ white-space: nowrap; /* Переносов в тексте нет */ } </style> </head> <body> <p>Пример</p> <p> &lt;html&gt; &lt;body&gt; &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt; &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; = Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt; где n — целое число &gt; 2 &lt;/body&gt; &lt;/html&gt; </p> </body> </html>

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

Рис. 1. Применение свойства white-space

Объектная модель

Объект.style.whiteSpace

Примечание

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведёт себя как pre-line.

Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

В Firefox для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.

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

СпецификацияСтатус
CSS Text Level 3Рабочий проект
CSS Level 2 (Revision 1)Рекомендация
Спецификация

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

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

Браузеры

normal5.5121411
pre6121411
nowrap5. 5121411
pre-wrap8121833
pre-line81219.533.5
 
normal1141
pre1141
nowrap1141
pre-wrap1493
pre-line14103
Браузеры

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

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

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

Текст и шрифт

См. также

  • text-overflow

Рецепты

  • Как запретить перенос текста?

Свойство пробела CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Демонстрация различных значений свойства пробела:

p.a {
  white-space: nowrap;
}

p.b {
  пробел: обычный;
}

p.c {
  пробел: пред;
}

Попробуйте сами »

Определение и использование

Свойство white-space указывает, как обрабатывается пробел внутри элемента.

Показать демо ❯

Значение по умолчанию: обычный
Унаследовано: да
Анимация: нет. Читать про анимированный
Версия: CSS1
Синтаксис JavaScript: объект . style.whiteSpace=»nowrap» Попробуй

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Собственность
пробел 1,0 8,0 3,5 3,0 9,5

Синтаксис CSS

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

Значения свойств

Значение Описание Демо
обычный Последовательности пробелов будут объединены в один пробел. Текст будет перенесен при необходимости. Это по умолчанию Демонстрация ❯
сейчас Последовательности пробелов будут объединены в один пробел. Текст никогда не будет переноситься на следующую строку. Текст продолжается на той же строке до тех пор, пока встречается тег
Демонстрация ❯
до Браузер сохраняет пробелы. Текст будет переноситься только на разрывы строк. Действует как Тег
 в HTML
Демонстрация ❯
предварительный Последовательности пробелов будут объединены в один пробел. Текст будет переноситься при необходимости, а на разрывы строк Демонстрация ❯
предварительная упаковка Браузер сохраняет пробелы. Текст будет переноситься при необходимости, а на разрывы строк Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебное пособие по CSS: интервалы между текстом в CSS

Ссылка на HTML DOM: свойство whiteSpace

❮ Назад Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

9 Top1s Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

Пробелы - Tailwind CSS

​Базовое использование

​Нормальный

Используйте пробел-нормальный для нормального обтекания текста внутри элемента. Новые строки и пробелы будут свернуты.

Всем привет! Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Вы никогда не будете знать. 

 <дел>
  
Привет всем!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Вы никогда не узнаете.

​No Wrap

Используйте whitespace-nowrap , чтобы предотвратить перенос текста внутри элемента. Новые строки и пробелы будут свернуты.

Всем привет! Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Вы никогда не будете знать.

 <дел>
  
Привет всем!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Вы никогда не узнаете.

​Pre

Используйте whitespace-pre для сохранения символов новой строки и пробелов внутри элемента. Текст не будет перенесен.

Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Вы никогда не будете знать.

 <дел>
  
Привет всем!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Вы никогда не узнаете.

Pre Line

Используйте whitespace-pre-line для сохранения новых строк, но не пробелов внутри элемента. Текст будет переноситься нормально.

Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Вы никогда не будете знать.

 <дел>
  
Привет всем!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Вы никогда не узнаете.

Pre Wrap

Используйте whitespace-pre-wrap для сохранения новых строк и пробелов внутри элемента. Текст будет переноситься нормально.

Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Вы никогда не будете знать.

 <дел>
  
Привет всем!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Вы никогда не узнаете.

​Условное применение

​Наведение, фокус и другие состояния

Tailwind позволяет вам условно применять служебные классы в различных состояниях, используя модификаторы варианта. Например, используйте hover:whitespace-pre , чтобы применять утилиту whitespace-pre только при наведении.

 <дел>

Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

​Точки останова и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга медиа-запросов, таких как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и т.

No related posts.