Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Шрифт и текст : white-space

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут white-space | Свойство whiteSpace

Задает количество пробелов между словами, а также как должны быть установлены переносы строк.

Синтаксис

HTML { white-space : sWrap }
Скрипты [ sWrap = ] object.style.whiteSpace[ = v ]

Используемые значения

sWrap
Строка, которая может определять и принимать одно из следующих значений:
normal
Значение по умолчанию. Переносы строк устанавливаются автоматически. Содержимое переносится на следующую строку, если оно превышает ширину объекта.
nowrap
Переносы строк запрещены. Содержимое не переносится на следующую строку.
pre
Переносы строк и другие пробелы, установленные при форматировании, сохраняются. Чтобы был видимый эффект от задания этого значения, необходимо в объявлении !DOCTYPE указать режим standards-compliant (совместимые стандарты). Иначе, даже если вы установите значение pre, оно будет эквивалентно значению normal.
pre-line
В Internet Explorer 8.0 последовательности пробелов и переносов строк сохраняются.
pre-line
В Internet Explorer 8.0 последовательности пробелов и переносов строк не сохраняются.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является normal для всех объектов со следующими исключениями:

:after pre-line
:before pre-line
PRE pre

Атрибут Каскадных таблиц стилей (CSS) наследуется.

Замечания

Символы пробелов, такие как перенос строки, пробел, символ табуляции, по умолчанию не сохраняются в HTML-документах. Если свойству whiteSpace задано значение normal или nowrap, то вы можете добавить пробелы с помощью &nbsp;. Перенос строки можно осуществить с помощью <br>.

Свойство white-space по своей работе похоже на <pre>. Различие состоит в том, что white-space не меняет шрифт текста на моноширинный.

Примеры

Следующие примеры показывают как использовать атрибут white-space и свойство whiteSpace для задания выравнивания текста.

В первом примере используются селектор p и два класса для задания форматирования текста, когда происходят события onmouseover и onmouseout.

<html>

<head>
<style type="text/css">
.clsOneLiner {
    white-space: nowrap;
}
.clsAutoBreak {
    white-space: normal;
}
</style>
</head>

<body>

<p onmouseover="this.className='clsOneLiner';" 
    onmouseout="this.className='clsAutoBreak';">
Очень-очень длинная строка текста не будет перенесена, если для нее будет установлено значение nowrap. 
Наведите курсор мыши на текст, чтобы отменить автоматический перенос строки.</p>

</body>

</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<script type="text/javascript">
function fnSwitch(){
  oDiv.style.whiteSpace = event.srcElement.innerText;
  document.all.oSpan.innerText = oDiv.currentStyle.whiteSpace;
}
</script>
</head>

<body>

<h1>direction Property Sample</h1>
<h2>direction: 
<span id="oSpan" style="color: red"></span></h2>

<p>[ <a href="#" onclick="fnSwitch()">normal</a> | 
<a href="#" onclick="fnSwitch()">nowrap</a> | 
<a href="#" onclick="fnSwitch()">pre</a> 
]</p>
<div id="oDiv" style="background: #e4e4e4; padding: 10px;">
    В   этом   месте,   предложение   имеет   3   пробела   между   каждым   словом.

    Это предложение 
    написано 
    в три строки.</div>

</body>

</html>

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 1 (CSS1)

Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms531182(VS.85).aspx

https://developer.mozilla.org/en/CSS/white-space

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования