• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → CSS → Свойство CSS white-space

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

Свойство CSS white-space отвечает за управлением пробелами между символами.


Синтаксис CSS white-space

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit;

Где:

  • normal - обычное отображение, когда множественные пробелы склеиваются в один, а перенос строк делается автоматически (по умолчанию стоит это значение)
  • nowrap - пробелы склеиваются в один, а перенос строк автоматически не делается
  • pre - пробелы и перенос строк учитываются. Аналогичен тегу <pre>, но с отличием, что текст может выходить за пределы области
  • pre-line - аналогично значению pre с отличием, что если текст не помещается в допустимой области, то он переносится автоматически
  • pre-wrap - пробельные символы учитываются, перенос строк делаются автоматически
  • inherit - принять значение предка (родителя)
Значение Перенос текста Пробелы
normal Переносится Не учитываются
nowrap Не переносится Не учитываются
pre Не переносится Учитываются
pre-line Переносится Не учитываются
pre-wrap Переносится Учитываются

Примеры с множественными пробелами

Пример 1. Свойство white-space: nowrap

<html> <head> <style> .primer1{ white-space: nowrap; font-size: 14px; width: 200px; border: 1px solid #3A2; padding: 3px; } </style> </head> <body> <div class="primer1">Пробелы склеиваются в один. Переноса строки нет</div> </body> </html>

Вот как это выглядит на странице:

Пробелы склеиваются в один. Переноса строки нет


Пример 2. Свойство white-space: pre

<html> <head> <style> .primer2{ white-space: pre; font-size: 14px; width: 200px; border: 1px solid #3A2; padding: 3px; } </style> </head> <body> <div class="primer2">Пробелы склеиваются в один. Возможен выход за пределы границы. Перенос строки учитывается </div> </body> </html>

Вот как это выглядит на странице:

Пробелы склеиваются в один. Возможен выход за пределы границы. Перенос строки учитывается

Пример 3. Свойство white-space: pre-wrap

<html> <head> <style> .primer3{ white-space: pre-wrap; font-size: 14px; width: 200px; border: 1px solid #3A2; padding: 3px; } </style> </head> <body> <div class="primer3">Пробелы склеиваются в один. Есть автоматический перенос строк. Перенос строки учитывается </div> </body> </html>

Вот как это выглядит на странице:

Пробелы склеиваются в один. Есть автоматический перенос строк. Перенос строки учитывается

Для обращения к white-space из JavaScript нужно писать следующую конструкцию:

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


Читайте также:
• Свойство text-transform
• Свойство text-align
• Свойство vertical-align
• Свойство text-indent
• font-weight
• Свойство font
• Свойство text-decoration
• Как сделать свой курсор в html
• Все про CSS border
• Все про CSS background
• Все про CSS transition

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru