white-space

Содержание

white — space
Кратко
Пример
Как пишется
Как понять
normal
Подсказки
На практике
Денис Ежков советует
white-space
Интерактивный пример
Сводка
Синтаксис
Значения
Формальный синтаксис
white-space
Объектная модель
Браузеры
Как реализуется перенос текста CSS?
Зачем переносить «непереносимое»
Решаем проблему переноса слов с помощью HTML
Как реализовать CSS перенос слов
Как реализовать запрет переноса слов CSS

white — space

Решаем, будет ли текст переноситься по пробелам или нет.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство white — space указывает браузеру, как обрабатывать пробелы в тексте.

Пример

Скопировать ссылку «Пример» Скопировано

 a  white-space: nowrap;> a  white-space: nowrap; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .element  white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces;> .element  white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Если текста в элементе много (больше, чем может вместить ширина элемента), то по умолчанию браузер пытается переносить слова на новую строку. Перенос в общем случае выполняется по символам пробела либо по символам переноса строк. Разговор сейчас идёт именно про форматирование текста прямо внутри HTML. Ведь мы можем в HTML длинный абзац оставить одной строкой, а можем разбить на несколько строк, используя клавишу Enter. По умолчанию браузер игнорирует форматирование в HTML. Он ориентируется только на теги, и выводит текст на экран, опираясь на текущий способ обработки пробельных символов. Но мы можем изменить этот способ, используя различные значения свойства white — space .

normal

Скопировать ссылку «normal» Скопировано

Если в строке есть несколько подряд идущих пробелов, то браузер схлопывает их в один пробел. Я из лесу вышел = Я из лесу вышел . Все переносы строк в HTML внутри тега также заменяются на пробел:

   Однажды, в студёную зимнюю пору Я из лесу вышел; p> Однажды, в студёную зимнюю пору p> p>Я из лесу вышел;p>

Подсказки

Скопировать ссылку «Подсказки» Скопировано

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Довольно часто значение white — space : pre используется при вёрстке исходного кода:

Источник

white-space

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

Интерактивный пример

Примечание: Для управления переносами внутри слов используйте overflow-wrap , word-break или hyphens .

Сводка

/* Ключевые значения */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* Глобальные значения */ white-space: inherit; white-space: initial; white-space: unset;

Синтаксис

Свойство white-space определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.

Значения

Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.

Объединяет последовательности пробелов в один пробел, как значение normal , но не переносит строки (оборачивание текста) внутри текста.

Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы .

Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам , и при необходимости для заполнения строчных боксов..

Поведение идентично pre-wrap со следующими отличиями:

Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).

В приведённой ниже таблице указано поведение различных значений свойства white-space :

Новые строки	Пробелы и табуляция	Перенос текста по словам	Пробелы в конце строки
normal	Объединяются в одну	Объединяются в один пробел	Переносится	Удаляются
nowrap	Объединяются в одну	Объединяются в один пробел	Не переносится	Удаляются
pre	Сохраняются как в источнике	Сохраняются как в источнике	Не переносится	Сохраняются как в источнике
pre-wrap	Сохраняются как в источнике	Сохраняются как в источнике	Переносится	Висят
pre-line	Сохраняются как в источнике	Объединяются в один пробел	Переносится	Удаляются
break-spaces	Сохраняются как в источнике	Сохраняются как в источнике	Переносится	Переносятся

Формальный синтаксис

Источник

white-space

normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

Действие значений на текст представлено в табл. 1.

Табл. 1. Перенос текста и пробелы при разных значениях white-space

Значение	Перенос текста	Пробелы
normal	Переносится	Не учитываются
nowrap	Не переносится	Не учитываются
pre	Не переносится	Учитываются
pre-line	Переносится	Не учитываются
pre-wrap	Переносится	Учитываются

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 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 .

Источник

Как реализуется перенос текста CSS?

Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но реализовать перенос текста CSS точно поможет.

Зачем переносить «непереносимое»

В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.

Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

Решаем проблему переноса слов с помощью HTML

Перед тем, как рассмотреть CSS перенос слов , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:

Использование символа мягкого разрыва — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:

Пример сложного химического соединения и текста - метилпропенилендигидроксициннаменилакрилическая кислота

Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

wbr

метилпропенилендигидроксициннаменилакрилическая кислота

В некоторых браузерах поддержка тега реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

Как реализовать CSS перенос слов

Перед тем, как реализовать CSS перенос слов , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

normal – слова не переносятся;
break-word – автоматический перенос слов;
inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

 .container < background-color: rgb(204,204,204); padding:10px; width:200px; >.content  метилпропенилендигидроксициннаменилакрилическая кислота

В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать того чтобы реализовать CSS перенос слов .

word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

normal – используются правила переноса, установленные по умолчанию;
word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

 .content  Синхрофазотрон
 Обеспокоенное состояние
 Одиннадцатиклассница
 метоксихлордиэтиламинометилбутиламин

hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:

none – отключает CSS перенос слов;
manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса () ;
auto – браузер автоматически переносит слова на основе своих настроек.

Для корректной работы свойства в теге или

должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

 .container < background-color: rgb(153,255,204); padding:10px; width:200px; >.content  метилпропенилендигидроксициннаменилакрилическая кислота

Как реализовать запрет переноса слов CSS

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать CSS перенос слов можно реализовать несколькими способами:

С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
Задав свойству white-space значение « nowrap » ( white-space: nowrap ).

 .container < background-color: rgb(153,255,204); padding:10px; width:200px; >.content < -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; >.nowrap  метилпропенилендигидроксициннаменилакрилическая кислота раз
 метилпропенилендигидроксициннаменилакрилическая два
 метилпропенилендигидроксициннаменилакрилическая кислота три
 метилпропенилендигидроксициннаменилакрилическая кислота четыри

Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

Источник