home

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

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

Небольшое HTML-введение

При вставке текста в (X)HTML, независимо от того, сколько пробелов вы поставите между словами, при выводе страницы в окне браузера, все эти пробелы, по умолчанию, будут сокращены до одного. Это довольно удобно, поскольку мы легко можем форматировать текст в коде, с тем чтобы улучшить его читаемость, при этом, не создавая дополнительных пробелов и ненужных разрывов строк.

Однако, если же вы хотите отобразить все пробелы и переносы строк – вам поможет тэг <pre>. Весь текст внутри тэгов <pre> (если он не заключен в дополнительные тэги), будет выведен точно также, как он отформатирован в коде. При этом, даже если в разметке нет ни одного разрыва строки, тэг <pre> все равно добавит одну строчку, для создания дополнительно отступа. Следовательно, вы можете использовать вышеуказанный тэг для переопределения дефолтного подведения HTML.

Кроме того, в (X)HTML есть возможность использовать неразрывный пробел (&nbsp;), который используется для создания множественных пробелов. Ранее, для этих целей использовался, устаревший на сегодняшний день, тэг <nobr>.

Свойство white-space – это CSS-аналог всех вышеперечисленных (X)HTML-методов управления пробелами.

Описание и возможные значения

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

Далее представлен список различных значений свойства white-space, вместе с визуальной демонстрацией их действия.

Значение: normal

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

Значение: nowrap

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

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

Значение: pre

Значение pre, полностью соответствует вашим ожиданиям –  вы получаете ровно то форматирование, которое видите в коде. Учитываются все пробелы и переносы строк, как если бы текст был заключен в тэги <pre>. Кроме того, если в коде, вы разместили текст без переносов, то границы родительского контейнера будут расширены, для размещения текста в одну строку.

Значение: pre-line

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

Поддержка этого свойства браузерами, оставляет желать лучшего, а именно:

  • Internet Explorer – начиная с версии 7
  • Firefox – начиная с версии 3.0
  • Opera  — начиная с версии 9.2

Значение: pre-wrap

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

Поддержка браузерами:

  • Internet Explorer – начиная с версии 7
  • Firefox —  начиная с версии 3.0

Примеры использования

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

В состав ссылки “read more” входит символ &raquo; (кавычка), перенесенный на другую строку в связи с нехваткой свободного пространства. Эту ситуацию легко можно исправить, применив свойство white-space в значении nowrap. Благодаря этому, ссылка будет целиком перенесена на новую строку как единый объект.

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

Заключение

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

Как уже упоминалось выше, наиболее полезным из всех возможных значений свойства white-space – является значение nowrap. В связи с отсутствием в Internet Explorer полной поддержки значений pre-line и pre-wrap, они используются не так часто, хотя тоже могут принести немало пользы, если получат более широкую поддержку.

Перевод статьи “The CSS white-space Property Explained”, автор Louis Lazaris

Обзор CSS-свойства white-space: 9 комментариев

  1. Таблица из 1 строки в 3 ячейки, у центральной ячейки ширина 100% и чтобы контент в крайних ячейках не прыгал на новую строку я заключил его в блок с white-space: nowrap ибо тэг был не валидным и вешал скрипты в IE6.

  2. Пока читал, думал зачем вообще данное свойство использовать, за не знанием его привык другими способами обходиться, но как только дошел до применяемости… Вообщем очень полезное свойство, спасибо

    1. Никогда о таком свойстве не слышал, да думаю и не услышал бы, если бы не тут. Да и вообще мне оно кажется немного бесполезным.

      1. Простейший пример, из-за которого отыскал только что эту статью в закладках и нашел ответ. Есть всплывающее «окно» типа «лайтбокс» и управлять отображением внутри него можно только на основании стилей, конечно можно переписать код «построителя» окошка, но это изменения в сторонней библиотеке совершенно не нужные, а контент в окно грузиться из БД и с переносами и форматированием, например комментарии и соответственно отобразить его надо как и вводили, и решение с pre-line / pre-wrap будет самым правильным, в данном случае.

  3. А если в блоке не строка, а таблица например, и она выходит за границы. Эти параметры помогут или нет?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *