white-space в CSS


Перенос строки CSS

Перенести ли текст автоматически или показать в одну строку, отобразить рядомстоящие пробелы как один или каждый в отдельности определяет white-space .

white-space

Запрет переноса с помощью white-space: nowrap;

Запрет переноса с помощью неразрывного пробела и/или неразрывного дефиса ‑

В данном примере они более подходят, так как занимают меньше места. К тому же при использовании overflow-wrap: break-word; или word-wrap: break-word; или word-break: break-all; символы всё же в определённый момент переходят на следующую строчку.

Прокрутка при отключении автопереноса

Часто совместно со значениями pre или nowrap элементу меняется значение свойства overflow , чтобы добавить полосу прокрутки или обрезать выходящую за границу часть, дабы не появился горизонтальный скролл у всего сайта.

Разрыв строки

Элементы после тега
будут перенесены на следующую строку с любым значением свойства white‑space .

CSS white-space Свойство

Пример

Демонстрация различных значений свойства «white-space»:

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


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

Значение по умолчанию: normal
Inherited: yes
Animatable: no. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.whiteSpace=»nowrap»

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

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

white-space

Easily manage projects with monday.com

The white-space property controls how text is handled on the element it is applied to. Let’s say you have HTML exactly like this:

You’ve styled the div to have a set width of 100px. At a reasonable font size, that’s too much text to fit in 100px. Without doing anything, the default white-space value is normal , and the text will wrap. See the example below or follow along at home with the demo.

If you want to prevent the text from wrapping, you can apply white-space: nowrap;

Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code). When the text renders in the browser, those line breaks appear as if they are stripped out. Also stripped out are the extra spaces on the line before the first letter. If we want to force the browser to display those line breaks and extra white space characters we can use white-space: pre;

It’s called pre because the behavior is that as if you had wrapped the text in tags (which by default handle white space and line breaks that way). White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code. This is particularly useful when literally displaying code, which benefits aesthetically from some formatting (and some time is absolutely crucial, as in white space dependent languages!)

Perhaps you like how pre honors white space and breaks, but you need the text to wrap instead of potentially break out of its parent container. That’s what white-space: pre-wrap; is for:

Finally, white-space: pre-line; will break lines where they break in code, but extra white space is still stripped.


Interestingly, the final line break is not honored. As per the CSS 2.1 spec: «Lines are broken at preserved newline characters, and as necessary to fill line boxes.» so perhaps that makes sense.

Here is a table to understand the behaviors of all the different values:

New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

In CSS3, the white-space property is literally going to follow that chart and map the properties to text-space-collapse and text-wrap accordingly.

More Information

Browser Support

Little more complex than the regular support table, since each value has different levels of support:

PRE и NOWRAP в CSS: свойство white-space

19 февраля 2010 8 Рубрика: HTML&CSS, Важные мелочи

« Предыдущая запись
Красивое раскрывающееся меню на jQuery
Следующая запись »
Как выделить все чекбоксы одним кликом? JavaScript способ, и три способа на jQuery

Пишу в качестве напоминания, что в CSS есть аналог тегов

и ), то мы получим тот же эффект, что и через свойство css. Аналогично достигается в таблице путём дописки параметра nowrap в теге td. Так что всё на вкус и на цвет, а что использовать — решать вам.

, но, в отличие от него, не меняет шрифт на моноширинный; 2) не работает в IE6 и младше; 3) работает в IE7 только при указании .

В общем, white-space: pre и white-space:nowrap имеют место для частого использования (особенно второй, так как кроссбраузерен), а два последних под вопросом. Тем не менее.


В рамках white-space опишу одну проблему, возникающую с хайлайтерами (скрипты, которые подсвечивают код в блогах) — текст в тегах PRE не переносится, а скролится. Для этого был создан универсальный метод (ссылка на оригинал) , который я ниже и приведу.

Это наиболее полный код, однако и его можно сократить. Для начала удалим вторую строку, так как она бесполезна — зачем говорить тегу pre, чтобы он вёл себя как тег pre. Четвёртую строку тоже можно удалить, так как свойство удаляет дополнительные пробелы, а они нужны. Шестую строку также можно опустить, сами догадайтесь почему. По большому счёту можно вообще оставить только третью и девятую строки, так как даже седьмая опера уже канула в лету.

Пожалуй это всё, что нужно знать о white-space. До новых встреч! =)

Свойство CSS white-space

Свойство CSS white-space отвечает за управлением пробелами между символами.

Синтаксис CSS white-space

  • normal — обычное отображение, когда множественные пробелы склеиваются в один, а перенос строк делается автоматически (по умолчанию стоит это значение)
  • nowrap — пробелы склеиваются в один, а перенос строк автоматически не делается
  • pre — пробелы и перенос строк учитываются. Аналогичен тегу

Вот как это выглядит на странице:

Пример 2. Свойство white-space: pre

Вот как это выглядит на странице:

Пример 3. Свойство white-space: pre-wrap

Вот как это выглядит на странице:

Для обращения к white-space из JavaScript нужно писать следующую конструкцию:


PRE и NOWRAP в CSS: свойство white-space

19 февраля 2010 8 Рубрика: HTML&CSS, Важные мелочи

« Предыдущая запись
Красивое раскрывающееся меню на jQuery
Следующая запись »
Как выделить все чекбоксы одним кликом? JavaScript способ, и три способа на jQuery

Пишу в качестве напоминания, что в CSS есть аналог тегов

и ), то мы получим тот же эффект, что и через свойство css. Аналогично достигается в таблице путём дописки параметра nowrap в теге td. Так что всё на вкус и на цвет, а что использовать — решать вам.

, но, в отличие от него, не меняет шрифт на моноширинный; 2) не работает в IE6 и младше; 3) работает в IE7 только при указании .

В общем, white-space: pre и white-space:nowrap имеют место для частого использования (особенно второй, так как кроссбраузерен), а два последних под вопросом. Тем не менее.

В рамках white-space опишу одну проблему, возникающую с хайлайтерами (скрипты, которые подсвечивают код в блогах) — текст в тегах PRE не переносится, а скролится. Для этого был создан универсальный метод (ссылка на оригинал) , который я ниже и приведу.

Это наиболее полный код, однако и его можно сократить. Для начала удалим вторую строку, так как она бесполезна — зачем говорить тегу pre, чтобы он вёл себя как тег pre. Четвёртую строку тоже можно удалить, так как свойство удаляет дополнительные пробелы, а они нужны. Шестую строку также можно опустить, сами догадайтесь почему. По большому счёту можно вообще оставить только третью и девятую строки, так как даже седьмая опера уже канула в лету.

Пожалуй это всё, что нужно знать о white-space. До новых встреч! =)

white-space

Easily manage projects with monday.com

The white-space property controls how text is handled on the element it is applied to. Let’s say you have HTML exactly like this:

You’ve styled the div to have a set width of 100px. At a reasonable font size, that’s too much text to fit in 100px. Without doing anything, the default white-space value is normal , and the text will wrap. See the example below or follow along at home with the demo.


If you want to prevent the text from wrapping, you can apply white-space: nowrap;

Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code). When the text renders in the browser, those line breaks appear as if they are stripped out. Also stripped out are the extra spaces on the line before the first letter. If we want to force the browser to display those line breaks and extra white space characters we can use white-space: pre;

It’s called pre because the behavior is that as if you had wrapped the text in tags (which by default handle white space and line breaks that way). White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code. This is particularly useful when literally displaying code, which benefits aesthetically from some formatting (and some time is absolutely crucial, as in white space dependent languages!)

Perhaps you like how pre honors white space and breaks, but you need the text to wrap instead of potentially break out of its parent container. That’s what white-space: pre-wrap; is for:

Finally, white-space: pre-line; will break lines where they break in code, but extra white space is still stripped.

Interestingly, the final line break is not honored. As per the CSS 2.1 spec: «Lines are broken at preserved newline characters, and as necessary to fill line boxes.» so perhaps that makes sense.

Here is a table to understand the behaviors of all the different values:

New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

In CSS3, the white-space property is literally going to follow that chart and map the properties to text-space-collapse and text-wrap accordingly.

More Information

Browser Support

Little more complex than the regular support table, since each value has different levels of support:

Свойство white-space


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

Обратите вниманиена на пустое место над строкой, сюда:

Рисунок 1. Работа свойства white-space: pre.

Его появление объясняется тем, что в HTML-коде между тегом

Нам в этом примере не помешал бы ещё и автоматический перенос строк. В таких случая применяется следующее значение — pre-wrap .

white-space: pre-wrap

Значение pre-wrap — работает во всём как и значение pre за исключением того, что добавляет автоматические переносы, если текст не помещается в контейнер.

Давайте рассмотрим работу значения pre-wrap на том же самом примере HTML-кода, меняем только это значение:

То есть, мы видим, что переносы строки происходят, как при использовании тега

, и вместе с этим в поток текста добавляются автоматические переносы. Это и есть особенность значения значения pre-wrap .

Свойство white-space относится к разделу работа с текстом в CSS.

свойство white-spaceCSS3-генератор ☛

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


Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

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

Табл. 1. Перенос текста и пробелы при разных значениях white-space

Значение Перенос текста Пробелы
normal Переносится Не учитываются
nowrap Не переносится Не учитываются
pre Не переносится Учитываются
pre-line Переносится Не учитываются
pre-wrap Переносится Учитываются
Пример

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

Примечание

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap . Для

значения normal и pre ведут себя как pre-wrap , а значение nowrap ведёт себя как pre-line .

Opera до версии 9.5 не поддерживает значение pre-line . Для

значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

значения normal , nowrap , и pre воспринимаются как pre-wrap .

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


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

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

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

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

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
normal 5.5 1 4 1 1
pre 6 1 4 1 1
nowrap 5.5 1 4 1 1
pre-wrap 8 1 8 3 3
pre-line 8 1 9.5 3 3.5
Android Firefox Mobile Opera Mobile Safari Mobile
normal 1 1 4 1
pre 1 1 4 1
nowrap 1 1 4 1
pre-wrap 1 4 9 3
pre-line 1 4 10 3

Браузеры

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

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

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


Свойство CSS white-space.

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

Все лишние пробелы и переносы строки, которые отображаются в исходном коде, на веб-странице будут удалены.

Такое положение вещей не всегда может быть полезно. Иногда нужно отобразить текст именно так, как он выглядит в исходном коде. Например, если мы публикуем, какие-то стихотворные формы, форматированный программный код и.т.д.

Для этой цели мы можем воспользоваться элементом

Давайте разберем каждое из них более подробно.

normal – устанавливается значением по умолчанию. Множество пробелов заменяется одним. Переход на новую строку возникает, когда не хватает места в родительском блоке.

nowrap – Множество пробелов заменяется одним, переносы строк игнорируются, весь текст будет отображаться одной строкой. Только добавлением тега
можно выполнить перенос на новую строку.

pre – Сколько пробелов вы поставите, столько и отобразится на веб-странице. Переносы строк в исходном коде также будут учитываться. Мы получаем, своего рода, аналог тэга

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

pre-wrap – Сколько пробелов вы поставите, столько и отобразится на веб-странице. Переносы строк в исходном коде также будут учитываться + если строка не будет помещаться в ширину контейнера, то она будет перенесена на следующую строку.

inherit – наследуется значение white-space от родительского элемента.

Таким образом, свойство white-space имеет более гибкие настройки переноса строк и отображения пробелов на веб-страницах, чем у элемента pre.

Используйте это знание на практике и располагайте текст на веб-страницах так, как вы этого хотите.

Илон Маск рекомендует:  Что такое код pspell_new_personal
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL