White space nowrap не работает

В 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-элементам, которые находятся внутри элемента, к которому его применили, а также не оказывают никакого эффекта на блочные элементы и отступы между ними.

Источник

Свойство white-space

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

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

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

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

pre / nowrap

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

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

pre :

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

nowrap

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

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

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

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

white-space: pre :

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

white-space: nowrap :

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

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

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

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

pre-wrap/pre-line

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

white-space: pre-wrap :

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

white-space: pre-line :

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

Источник

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

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

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

Немного основ HTML

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

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

. Весь контент, помещенный внутрь тега

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

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

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

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

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

Ниже перечисляются различные значения свойства white-space с демонстрацией их работы:

Значение: normal

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

Значение: nowrap

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

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

Значение: 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, является применение его к ссылке, которая не должна прерываться символом перевода на новую строку. Взгляните на пример страницы на рисунке ниже:

Сссылка “read more” имеет символ » (») в конце, но по причине недостаточности места, символ перенесен на следующую строку. Такая неприятность может быть исправлена с помощью свойства white-space со значением nowrap , назначенного для ссылки . Ссылка должна быть перемещена целиком на следующую строку без разрывов. Данный пример также демонстрирует факт, что свойство white-space влияет только на контент внутри элемента, к которому оно применено. Таким образом, хотя вся ссылка будет перемещена на следующую строку, текст внутри элемента не будет разделяться символами перевода строки.

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

Распространенная ошибка новичков

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

Источник

Internet Explorer		Chrome	Opera		Safari		Firefox		Android	iOS
6.0+	8.0+	1.0+	4.0+	9.5+	1.0+	3.0+	1.0+	3.5+	1.0+	1.0+

Значение по умолчанию	normal
Наследуется	Да
Применяется	К блочным элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/text.html#propdef-white-space

White space nowrap не работает

white-space

Краткая информация

Версии CSS

Описание

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

Браузеры