Справочник по 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, то вы можете добавить пробелы с помощью . Перенос строки можно осуществить с помощью <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
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms531182(VS.85).aspx