—»     —»   Учимся использовать white-space в CSS
  Раздел: CSS/Style Sheets   Комментариев: 1  

Учимся использовать white-space в CSS

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

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

То, что нужно знать о HTML

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

Если вам хочется, чтобы все пробелы и переходы на новую строку отображались естественно, то вы можете воспользоваться лучшим другом параметра white-space – тэгом «pre». Все содержимое, не относящееся к тэгам, но включенное в тэг pre, будет отображено идентично тому содержимому, которое включено в остальные тэги. Это даже может способствовать тому, что отдельная линия расширит границы родительского элемента, если в верстке не задействованы параметры разрыва строки. Итак, так как по стандарту HTML игнорирует многократные пробелы и переходы на новую строку, вы можете заменить их тэгом «pre».

(X)HTML также позволяет нам воспользоваться неразрывным пробелом ( ). Если вы хотите поставить сразу несколько пробелов, и не хотите, чтобы они складывались, то можете воспользоваться неразрывным пробелом. Раньше пользовались тэгом «nobr», но в наше время мы не рекомендуем вам пользоваться данным методом.

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

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

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

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

Значение: normal

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

Учимся использовать white-space в CSS

Значение: nowrap

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

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

Учимся использовать white-space в CSS

Значение: pre

Значение pre работает именно так, как вы наверняка ожидаете: Так же, как и тэги «pre». Учитываются все пробелы и переходы на новую строку, то бишь, результат отображения в браузере соответствует коду. Также, следуя условиям использования тэга «pre», если в коде все расположено в одну строку, то эта строка будет толкать границы родительского элемента, чтобы в результате отображения все было расположено на одной строке.

Учимся использовать white-space в CSS

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

Значение представляет собой почти то же самое, что и стандартное (normal), за исключением одной вещи: учитываются переходы на следующую строку в коде HTML. Так что, если у вас несколько пробелов между элементами, то это будет проигнорировано, но если в коде есть переход на новую строку, то в выдаче мы тоже получим перенос на новую строку. Это значение не поддерживается браузером Internet Explorer вплоть до 7-й версии, Firefox до 3.0, и Opera до версии 9.2.

Учимся использовать white-space в CSS

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

Значение работает почти так же, как pre, за исключением естественных переносов строки в соответствии границ родительского элемента. Т.е. здесь не будет принудительного расположения всего содержимого в одну строку, как указано в коде, но будут учитываться многократные пробелы и конкретные переносы на новую строку. Значение не поддерживается в браузерах Internet Explorer вплоть до 7-й версии и Firefox до 3.0.

Учимся использовать white-space в CSS

Практика

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

Учимся использовать white-space в CSS

Возле ссылки «читать далее» мы видим спецсимвол &rаquо; (»), но так как в ячейке недостаточно места, знак переносится на новую строку. Этого можно избежать, если придать ссылке параметр white-space со значением nowrap. Тогда ссылка естественным образом целиком будет перенесена на следующую строку, и не будет разделена на две части. Это подчеркивает то, что white-space влияет только на содержимое, к которому он применен. Т.е., несмотря на то, что ссылка переносится на следующую строку, текст внутри ссылки не разделяется посредством переноса на новую строку.

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

Ошибочное представление

Одной из возможных проблем среди новичков, при использовании данного параметра (как мы уже упоминали раннее), это когда они думают, что параметр white-space: nowrap, примененный к элементу, предотвратит его переход на новую строку, если он является частью группы плавающих блоков. Но на самом деле параметр white-space будет действовать только на внутренние элементы, которые находятся внутри элемента, к которому был применен параметр, и не будет оказывать эффект на блочные элементы или на промежутки внутри самого элемента.

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

Мы будем ждать от вас комментариев и отзывов по поводу различных методов применения этого параметра, а также сообщайте о проблемах, возникших в процессе разработки проектов, возможно, мы сможем вам чем-то помочь. Мы думаем, что существует много разных плюсов и минусов относительно данного параметра, которые мы упустили в этой статье.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 10324   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 июля 2010 @ 20:48
Написал: Astrov — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
статейка дивно бохата полезным, спабакую
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031