white-space
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.
Действие значений на текст представлено в табл. 1.
| Значение | Перенос текста | Пробелы |
|---|---|---|
| normal | Переносится | Не учитываются |
| nowrap | Не переносится | Не учитываются |
| pre | Не переносится | Учитываются |
| pre-line | Переносится | Не учитываются |
| pre-wrap | Переносится | Учитываются |
HTML5 CSS2.1 IE Cr Op Sa Fx
white-space
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
[window.]document.getElementById(» elementID «).style.whiteSpace
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .
Свойство overflow-wrap
Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| break-word | Заставляет длинные слова переноситься на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки. |
| normal | Стандартное поведение: если длинное слово не влазит по ширине в контейнер — оно просто вылезет за его границу (при этом начнется с новой строки). |
Значение по умолчанию: normal .
Пример . Значение normal
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):
#elem < word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; >
Пример . Значение break-word
А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):
#elem < overflow-wrap: break-word; border: 1px solid red; width: 200px; >
Смотрите также
- свойство word-break ,
которое также позволяет перенести буквы длинного слова на новую строку - свойство word-wrap ,
которое является устаревшим названием свойства overflow-wrap - свойство hyphens ,
которое включает переносы слов по слогам - тег wbr ,
который реализует мягкие переносы средствами HTML - тег br ,
с помощью которого можно принудительно заставить перенести текст на новую строку
Как сделать каждое слово с новой строки css?
Перенос слов на новую строку css стилями можно реализовать несколькими путями.
Задача – из текста выделить группу слов и вывести их с новой строки.
Решение:
- Задать обертку для группы слов. Оберткой могут выступать теги: p, span, div
- В css указать display: block;
После разметки текста будет осуществлен перенос слов на новую строку силами css, без использования тега переноса.
Задача становится гораздо сложнее, когда смысл заключается в переносе каждого слова на новую строку. Можно использовать метод выше, но код станет избыточным.
В css перенести слово на новую строку позволяет свойство word-spacing. Прямое назначение этого свойства – задать интервал между словами. Этим можно воспользоваться.
Пример реализации
Как видно из примера выше, значение стиля принудительно устанавливает размер отступа между словами в 100% ширины экрана, что позволяет через css перенести слово на новую строку без изменения разметки сайта.
Свойство white-space
Свойство white-space устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат Enter при наборе кода).
Синтаксис
Значения
| Значение | Описание |
|---|---|
| nowrap | Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку. |
| pre | Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер — текст просто вылезет за его границы. Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство font-family . |
| pre-wrap | То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку. |
| pre-line | Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк). |
| normal | Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране. |
Значение по умолчанию: normal .
Пример . Значение nowrap
В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение nowrap :
#elem < width: 200px; white-space: nowrap; border: 1px solid red; >
Пример . Значение nowrap и тег br
Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br ):
amet, consectetur adipiscing elitorire.
#elem < width: 200px; white-space: nowrap; border: 1px solid red; >
Пример . Значение pre
В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab , с Enter и так далее):
#elem < width: 200px; white-space: pre; border: 1px solid red; >
Пример . Значение pre-wrap
А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:
#elem < width: 200px; white-space: pre-wrap; border: 1px solid red; >
Смотрите также
- свойства word-break и overflow-wrap ,
которые позволяют перенести буквы длинного слова на новую строку - свойство tab-size ,
которое устанавливает размер отступа, созданного клавишей Tab - свойство hyphens ,
которое включает переносы слов по слогам - свойство overflow ,
которое обрезает вылезающие за границу блока части - тег pre ,
который показывает текст так, как он был набран в редакторе HTML кода