Html white-space

Поговорим о свойстве white-space | CSS-Tricks по-русски

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

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

Немного об HTML

В HTML, всякий раз когда вы оставляете подряд несколько пробелов (табов или переводов строки), браузер, по умолчанию, будет выводить их как один единственный пробел. Такое поведение позволяет браузеру отделять и размещать элементы наиболее удобным для прочтения способом.

Если вы хотите чтобы все ваши пробелы и переводы строк отображались как в исходном HTML, то вам необходимо использовать тег pre, всё содержимое которого будет отображаться в соответствии с исходным кодом страницы.

Обратите внимание

Кроме того, можно воспользоваться неразрывным пробелом ( ), в случае, если вам необходимо, чтобы строки не «схлопывались». Также, в предыдущих версиях HTML был тег nobr для таких целей. Сейчас этот тег не рекомендуется к использованию.

Свойство white-space — это шаг к семантически чистому HTML. Вы можете настроить обработку браузером пробелов, используя CSS.

Определение и возможные значения

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

Ниже перечислены допустимые значения свойства с описанием каждого из них:

white-space: normal

Значение по умолчанию. Если оно установлено явно, то результатом будет обычный вывод, без использования тега pre. Как и в случае с большинством CSS-свойств, существует только одна причина использовать это значение, когда вы установили это свойство где-либо выше по иерархии свойств или элементов, для того чтобы вернуть обычное поведение элемента.

white-space: nowrap

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

Элемент, для которого значение свойства установлено как nowrap, не позволяет тексту и другим inline-элементам переносится естественным образом на новую строку.

Вместо этого он продолжает вывод за своими границами, до тех пор, пока текст не закончится, оставляя его на одной линии.

Это значение не оказывает никакого эффекта на повторяющиеся пробелы между словами, они по-прежнему «схлопываются» в один, как обычно.

white-space: pre

Это значение работает именно так, как ожидается: точно также, как и содержимое тега pre. Все пробелы и переводы строк выводятся точно также как и в исходном HTML. Если какая-нибудь строка шире, чем её родитель, то она не будет разрываться, а будет выводится как одна строка.

white-space: pre-line

Это свойство работает также как и normal, за исключением одного момента: переводы строк в исходной разметке являются значимыми.

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

Это значение не поддерживается в Internet Explorer до 7-ой версии, FireFox до 3-ей версии и Opera до версии 9.2.

white-space: pre-wrap

Это значение определяет такое же поведение как и значение pre, за тем исключением что строка переносится в соответствии с границами родительского элемента.

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

Это свойство не поддерживается в Internet Explorer до версии 7, а также FireFox до версии 3.

Варианты использования

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

На показанном скриншоте, ссылка «Read more »» кавычка (») перенеслась на новую строку, поскольку ей не хватило места. Этого можно избежать применив к ссылке значение nowrap.

Важно

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

Поэтому ссылка и была перенесена на новую строку целиком. Текст внутри неё — неразрывен.

Заблуждения

У новичков вёрстки часто возникает недопонимание при использовании white-space: nowrap, в случае если они применяют его к inline-элементу и ожидают что он не будет переносится на новую строку.

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

Источник: http://www.css-tricks.ru/articles/css/css-white-space

Свойство white-space

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

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

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

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

pre / nowrap

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

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

pre:

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

nowrap

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

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

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

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

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

white-space: pre:

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

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

Читайте также:  Влияет ли яндекс директ и google adwords на позиции сайта

white-space: nowrap:

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

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

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

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

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

pre-wrap/pre-line

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

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

white-space: pre-wrap:

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

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

white-space: pre-line:

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

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

Источник: https://learn.javascript.ru/white-space

white-space

The white-space CSS property sets how white space inside an element is handled.

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line; /* https://github.com/w3c/csswg-drafts/pull/2841 */
white-space: break-spaces; /* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

The white-space property is specified as a single keyword chosen from the list of values below.

Values

normalSequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.nowrapCollapses white space as for normal, but suppresses line breaks (text wrapping) within the source.

preSequences of white space are preserved. Lines are only broken at newline characters in the source and at
elements.pre-wrapSequences of white space are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes.

pre-lineSequences of white space are collapsed. Lines are broken at newline characters, at
, and as necessary to fill line boxes.

break-spacesThe behavior is identical to that of pre-wrap, except that:

Any sequence of preserved white space always takes up space, including at the end of the line.

A line breaking opportunity exists after every preserved white space character, including between white space characters.

Совет

Such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size).

The following table summarizes the behavior of the various white-space values:

 New linesSpaces and tabsText wrappingEnd-of-line spacesnormal

nowrap

pre

pre-wrap

pre-line

break-spaces

Collapse Collapse Wrap Remove
Collapse Collapse No wrap Remove
Preserve Preserve No wrap Preserve
Preserve Preserve Wrap Hang
Preserve Collapse Wrap Remove
Preserve Collapse Wrap Wrap

Formal syntax

normal | pre | nowrap | pre-wrap | pre-line

Examples

Basic example

code { white-space: pre; }pre { word-wrap: break-word; /* IE 5.5-7 */ white-space: pre-wrap; /* Modern browsers */
}

See it in action

Source

   

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS + Result

Specifications

Initial value

Applies to

Inherited

Media

Computed value

Animation type

Canonical order

normal
all elements
yes
visual
as specified
discrete
the unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internetwhite-space

pre

pre-wrap

pre-line

Support on

Support in SVG

Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 5.5 Opera Full support 4 Safari Full support 1 WebView Android ? Chrome Android ? Edge Mobile Full support Yes Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 6 Opera Full support 4 Safari Full support 1 WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Chrome Full support 1 Edge Full support 12 Firefox Full support 3Full support 3No support 1 — 3.6PrefixedPrefixed Implemented with the vendor prefix: -moz- IE Full support 8NotesFull support 8NotesNotes From Internet Explorer 5.5 to 7, word-wrap: break-word; can be used for line breaks in pre elements. Opera Full support 8 Safari Full support 3 WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Chrome Full support 1 Edge Full support 12 Firefox Full support 3.5 IE Full support 8 Opera Full support 9.5 Safari Full support 3 WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Chrome Full support 1 Edge ? Firefox Full support 36 IE Full support 5.5 Opera Full support 4 Safari Full support 1 WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Chrome No support No Edge ? Firefox Full support 36 IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
Читайте также:  Как размножить статью

Full support  Full supportNo support  No supportCompatibility unknown  Compatibility unknownSee implementation notes.See implementation notes.Requires a vendor prefix or different name for use.Requires a vendor prefix or different name for use.

See also

Источник: https://developer.mozilla.org/docs/Web/CSS/white-space

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

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

Вот пример:

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

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

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

Но, добавлять элемент pre в исходный код не всегда удобно и не всегда возможно. Было бы очень хорошо добавить тот же эффект, но только с помощью стилей CSS.

Действительно, в CSS есть специальное свойство, которое позволяет добиться того же эффекта, который мы получаем при использовании тега pre.

Это свойство называется white-space.

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

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

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

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

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

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

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

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

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

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

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

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

Источник: https://webgyry.info/white-space

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

Пишу в качестве напоминания, что в CSS есть аналог тегов и , а также свойства таблиц NOWRAP — название ему white-space. Это свойство устанавливает, как отображать пробелы в тексте, а именно:

  1. white-space: normal. Значение по умолчанию, текст ведёт себя как обычно.

  2. white-space: nowrap. Текст идёт одной строкой, переносов не происходит, за исключением вручную расставленных, например, тегом
    . Если обрамить текст тегом nobr (текст), то мы получим тот же эффект, что и через свойство css. Аналогично достигается в таблице путём дописки параметра nowrap в теге td. Так что всё на вкус и на цвет, а что использовать — решать вам.

  3. white-space: pre. Выводит текст с пробелами и переносами, как оно было оформлено в коде html.

    Если строка будет слишком длинной и не помещаться в окно браузера, то появится горизонтальная полоса прокрутки.

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

  4. white-space: pre-wrap. Выводит текст с пробелами и переносами, но если строка слишком длинная, то происходит перенос. Не поддерживается IE7 и младше.

  5. white-space: pre-line. Выводит текст с переносами, как было в коде html, но дополнительные пробелы игнорируются (последовательность пробелов отображается как один пробел). Линии также подгоняются по размеру. Не поддерживается IE7 и младше.

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

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

pre {      white-space: pre;           /* CSS2 */      white-space: pre-wrap;      /* CSS 2.1 */      white-space: pre-line;      /* CSS 2.1/3 */       white-space: -moz-pre-wrap; /* Mozilla */      white-space: -hp-pre-wrap;  /* HP printers */      white-space: -o-pre-wrap;   /* Opera 7 */      white-space: -pre-wrap;     /* Opera 4-6 */      word-wrap: break-word;      /* Только для динозавра IE */

}

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

Обратите внимание

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

По большому счёту можно вообще оставить только третью и девятую строки, так как даже седьмая опера уже канула в лету.

Источник: http://ShuBlog.ru/html-and-css/pre-i-nowrap-v-css-svojjstvo-white-space/

CSS — white-space

Пример

<html> <body> <b>Великая теорема Ферма</b><br> <i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br> где n — целое число > 2 </body> </html><\p>

Читайте также:  Как увеличить количество кликов по рекламе

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

Объект.style.whiteSpace

Примечание

Браузер 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.

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

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

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

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • 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

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

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

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

Текст и шрифт

Источник: http://calendar.vpogiba.info/wg/css/white-space.htm

The white-space CSS property

The display of a webpage may be directed by whitespace and newline automatically. It should applied in a box rather than a full page and in this case, it can help solve rendering problems.

What is white space?

In the CSS grammar, it is one or a sequence of characters following (with UTF):

  • Space (U+0020),
  • tab (U+0009),
  • line feed (U+000A),
  • carriage return (U+000D),
  • form feed (U+000C).

The codes em space (U+2003) and ideographic space (U+q3000) are not included. (Ref CSS 2.1).
Codes of line feed or carriage return have the same effect in a webpage.

And white-space is a CSS property that specifies how to handle white spaces with appropriate processing for each character.

Property white-space

The default is normal. We can assign the following values:

normalThe spaces are reduced to one.
There is a new line automatically to fit the width of the box.preDoes not merge spaces. No new line automatically. The line feed must be explicitly requested by a A code.

The line feed is also done if given in the text with the code D (Enter on your keyboard).

nowrapContiguous spaces are reduced to one.
Line feed codes are ignored.pre-wrapDo not merge contiguous spaces. Newline automatically added to fit the box.

Line feed with D or A codes.

pre-lineContiguous spaces are reduced to one. Newline automatically to fit the box.

Line feed with D or A codes.

In a tag , the white-space property is implicitly pre.

Recapitulation

  • Codes of tab, newline (no
    markup), space surrounding a A code are ignored with the values:
    normal, nowrap, pre-line.
  • Contiguous spaces are reduced to one with all values but:
    pre, pre-wrap.
  • Spaces at the beginning and end of a line are ignored with the values:
    normal, nowrap, pre-line.

Demonstration

The following texts contains contiguous spaces and line feed imposed by inserting the D code, without markup newline. It has also white spaces placed at the beginning and end of line.

Here is the original code :

This demo text
contains spaces suites and a carriage return.<\p>

It is rendered as following depending on values of the white-space property:

pre (white-space:pre, not the tag):

This demo text contains contiguous spaces and a carriage return.

normal:

This demo text contains contiguous spaces and a carriage return.

nowrap:

This demo text contains contiguous spaces and a carriage return.

pre-wrap:

This demo text contains contiguous spaces and a carriage return.

pre-line:

This demo text contains contiguous spaces and a carriage return.

The demos use the following code, with different values for the white-space property:

This demo text
contains contiguous spaces and a carriage return.<\p>

Compatibility

These values are recognized by all browsers except Internet Explorer version 8 and earlier.

  • pre-wrap and pre-line are not supported by Internet Explorer.
  • nowrap does not overflow the box with IE.
  • No value can keep the spaces at the beginning and end of line in IE.

How to insert tabs in a HTML page

How to insert tabs in a web page? This is done with the property white-space:pre, that can be applied to any tag.

The TAB key on the keyboard inserts a T code in the page content, but by default it is converted into space and contiguous spaces are reduced to one.
To keep this code correctly displayed by browsers, change the mode of spaces processing, which is made with white-space.

For this to better work, an advice: positioning data with a single character at first, for example:

x x x

Then replace the character by the right ones, and if needed remove excess tabs.

white-space:normal (default)

white-space:pre

Code source:

This text contains tabs: one one2 one3 two two2 two3 three three2 three3 four four2 four3

References

  • Recommendation CSS 2 of the W3C.

© 2010-2012 Xul.fr

Источник: https://www.xul.fr/en/css/white-space.php

Ссылка на основную публикацию