Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
20-03-2016, 14:46
Поговорим о свойстве white-space - «Учебник CSS»
Рейтинг:
Категория: Самоучитель CSS

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


Теги: CSS переводы строк пробелы будет значение

Просмотров: 1 894
Комментариев: 0:   20-03-2016, 14:46
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle