www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Свойства CSS (ЦСС) > white-space
Свойства CSS (ЦСС)
Все свойства
!important
@import
@media
active
after
background
background-attachment
background-color
background-image
background-position
background-repeat
before
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
caption-side
clear
clip
color
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
first-child
float
focus
font
font-family
font-size
font-style
font-variant
font-weight
height
hover
left
letter-spacing
line-height
link
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
position
quotes
right
table-layout
text-align
text-decoration
text-indent
text-transform
top
unicode-bidi
vertical-align
visibility
visited
white-space
width
word-spacing
z-index
CSS (ЦСС) по категориям
Цвет и фон
Границы
Шрифт
контент
Списки
Форматирование
Позиционирование
Отступы
Поля
Таблицы
Интерфейс
Важность
Псевдоэлементы
Псевдоклассы
Контент

white-space

Браузер Internet ExplorerInternet Explorer NetscapeNetтscape OperaОпера SafariSafari Файер фохMozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Част. — поддерживается частично.

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

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию normal
Наследуется Да
Применяется К блочным элементам
Аналог ШТМЛ <PRE>, <NOBR>

Описание

Параметр white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде ШТМЛ показывается на web-странице как один. Исключением является тег <PRE>, помещенный в этот контейнер контент выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <PRE>, но в отличие от него не меняет шрифт на моноширинный.

Синтаксис

white-space: normal | nowrap | pre

Аргументы

normal
контент в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap
Переносы строк в коде ШТМЛ игнорируются, весь контент отображается одной строкой, вместе с тем, добавление тега <BR> переносит контент на новую строку.
pre
контент показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде ШТМЛ. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоска прокрутки.

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>white-space</title>
  <style type="text/CSS (ЦСС)">
   P.example {
    border: 1px dashed #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
    padding: 7px; /* Поля вокруг контента */
    margin: 0px 0px 1em; /* Отступы */
    white-space: pre; /* Учитываются все пробелы и переносы */ 
   } 
   P.exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг контента */
    display: inline; /* Отображать как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    margin: 0px; /* Убираем отступы */
    white-space: nowrap; /* Переносов в контенте нет */
   }
  </style>
 </head>
 <body> 
  
  <p class="exampleTitle">Пример</p>
  <p class="example">
   &lt;ШТМЛ&gt;
   &lt;body&gt;
   &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   где n - целое число &gt; 2
   lt;/body&gt;
   &lt;/ШТМЛ&gt;
  </p>
  
 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра white-space

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

[window.]document.getElementById("elementID").style.whiteSpace

Примечание

Браузер Internet Эксплорер 6 и младше не поддерживает аргумент pre. Internet Эксплорер 7 понимает значение pre только в «строгом» режиме (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">).

Браузер Опера 9 и Файер фох 3 также работают со значением pre-wrap, при котором сохраняются все пробелы и переносы. Однако если контент по ширине не помещается в заданную область, то контент автоматически будет перенесен на следующую строку.

Copyright 2009 Все права засчищены, по всем вопросам пишите по адресу admin@www-html.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект