В 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».
Значение: nowrap
Это наиболее распространенное значение, используемое с параметром white-space, потому что оно делает то же самое, что и значение normal, но не берет в оборот обработку переходов на новую строку. Более того, не будут отображаться даже естественные переходы по строках, так как ограничения будут отключены.
Элемент, которому выставлен параметр white-space со значением nowrap ни в коем случае не даст тексту перейти на новую строку, а вместо этого будут расширяться границы родительского элемента до тех пор, пока строка не будет полностью завершена, и пока весь текст не будет отображен в одну цельную строку. Правда, это значение не влияет на пробелы между символами и другим содержимым, так что они, как и в стандартном случае, будут складываться в одиночный пробел.
Значение: pre
Значение pre работает именно так, как вы наверняка ожидаете: Так же, как и тэги «pre». Учитываются все пробелы и переходы на новую строку, то бишь, результат отображения в браузере соответствует коду. Также, следуя условиям использования тэга «pre», если в коде все расположено в одну строку, то эта строка будет толкать границы родительского элемента, чтобы в результате отображения все было расположено на одной строке.
Значение: pre-line
Значение представляет собой почти то же самое, что и стандартное (normal), за исключением одной вещи: учитываются переходы на следующую строку в коде HTML. Так что, если у вас несколько пробелов между элементами, то это будет проигнорировано, но если в коде есть переход на новую строку, то в выдаче мы тоже получим перенос на новую строку. Это значение не поддерживается браузером Internet Explorer вплоть до 7-й версии, Firefox до 3.0, и Opera до версии 9.2.
Значение: pre-wrap
Значение работает почти так же, как pre, за исключением естественных переносов строки в соответствии границ родительского элемента. Т.е. здесь не будет принудительного расположения всего содержимого в одну строку, как указано в коде, но будут учитываться многократные пробелы и конкретные переносы на новую строку. Значение не поддерживается в браузерах Internet Explorer вплоть до 7-й версии и Firefox до 3.0.
Практика
Вероятно, самой частой причиной применения параметра white-space – это когда параметр применяется к ссылке, которая при определенных обстоятельствах может перескочить на новую строку. Посмотрите на скриншот, приведенный ниже:
Возле ссылки «читать далее» мы видим спецсимвол &rаquо; (»), но так как в ячейке недостаточно места, знак переносится на новую строку. Этого можно избежать, если придать ссылке параметр white-space со значением nowrap. Тогда ссылка естественным образом целиком будет перенесена на следующую строку, и не будет разделена на две части. Это подчеркивает то, что white-space влияет только на содержимое, к которому он применен. Т.е., несмотря на то, что ссылка переносится на следующую строку, текст внутри ссылки не разделяется посредством переноса на новую строку.
Другое применение этого параметра встречается, когда нужно препятствовать переносу на новую строку ряда встроенных ячеек. Мы заметили это в предыдущей статье о центрировании нескольких блоков в одной строке.
Ошибочное представление
Одной из возможных проблем среди новичков, при использовании данного параметра (как мы уже упоминали раннее), это когда они думают, что параметр white-space: nowrap, примененный к элементу, предотвратит его переход на новую строку, если он является частью группы плавающих блоков. Но на самом деле параметр white-space будет действовать только на внутренние элементы, которые находятся внутри элемента, к которому был применен параметр, и не будет оказывать эффект на блочные элементы или на промежутки внутри самого элемента.
Как было указано, по большей части этот параметр используется со значением nowrap, так как именно это значение может принести хоть какую-то выгоду. Так как значения pre-line и pre-wrap не работают в Internet Explorer, их не так часто применяют, но они будут также приносить выгоду, если в дальнейшем появится обширная поддержка этих значений.
Мы будем ждать от вас комментариев и отзывов по поводу различных методов применения этого параметра, а также сообщайте о проблемах, возникших в процессе разработки проектов, возможно, мы сможем вам чем-то помочь. Мы думаем, что существует много разных плюсов и минусов относительно данного параметра, которые мы упустили в этой статье.
Раздел: CSS/Style Sheets Комментариев: 1
Учимся использовать white-space в CSS
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Design FactoRy Прочитано (раз): 10324 | Оставлено комментариев: 1
Источник материала / оригинал статьи Распечатать
Источник материала / оригинал статьи Распечатать