white-space | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||||
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 9.5+ | 1.0+ | 3.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.
Синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit
Значения
- normal
- Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
- nowrap
- Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
- pre
- Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
- pre-line
- В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
- pre-wrap
- В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
- inherit
- Наследует значение родителя.
Действие значений на текст представлено в табл. 1.
| Значение | Перенос текста | Пробелы |
|---|---|---|
| normal | Переносится | Не учитываются |
| nowrap | Не переносится | Не учитываются |
| pre | Не переносится | Учитываются |
| pre-line | Переносится | Не учитываются |
| pre-wrap | Переносится | Учитываются |
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>white-space</title> <style> .example { border: 1px dashed #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: "Courier New", Courier, monospace; /* Семейство шрифта */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы */ white-space: pre; /* Учитываются все пробелы и переносы */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Отображать как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ margin: 0; /* Убираем отступы */ white-space: nowrap; /* Переносов в тексте нет */ } </style> </head> <body> <p>Пример</p> <p> <html> <body> <b>Великая теорема Ферма</b><br> <i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br> где n - целое число > 2 </body> </html> </p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
[window.]document.getElementById(«elementID»).style.whiteSpace
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line, pre-wrap и inherit. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line.
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.
white-space — CSS | MDN
Примечание: Для управления переносами внутри слов используйте 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- Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.
nowrap- Объединяет последовательности пробелов в один пробел, как значение
normal, но не переносит строки (оборачивание текста) внутри текста. pre- Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы
pre-wrap- Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы
<br>, и при необходимости для заполнения строчных боксов. pre-line- Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам
<br>, и при необходимости для заполнения строчных боксов.. break-spaces- Поведение идентично
pre-wrapсо следующими отличиями:- Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
- Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
- Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).
В приведённой ниже таблице указано поведение различных значений свойства white-space:
| Новые строки | Пробелы и табуляция | Перенос текста по словам | Пробелы в конце строки | |
|---|---|---|---|---|
normal | Объединяются в одну | Объединяются в один пробел | Переносится | Удаляются |
nowrap | Объединяются в одну | Объединяются в один пробел | Не переносится | Удаляются |
pre | Сохраняются как в источнике | Сохраняются как в источнике | Не переносится | Сохраняются как в источнике |
pre-wrap | Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Висят |
pre-line | Сохраняются как в источнике | Объединяются в один пробел | Переносится | Удаляются |
break-spaces | Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Переносятся |
Формальный синтаксис
Основной пример
code {
white-space: pre;
}Перенос строк внутри элементов
<pre> pre {
word-wrap: break-word;
white-space: pre-wrap;
}BCD tables only load in the browser
CSS white-space:nowrap — CodeRoad
Проблема в том, что vertical-align: top не сработал
CSS
ul {
width: 160px;
display: block;
white-space: nowrap;
overflow: auto;
vertical-align: top;
}
li {
width: 80px;
display: inline-block;
}
HTML
<div>
<ul>
<li>one</li><li>two</li><li>three</li><li>four<br />Test</li>
</ul>
</div>
Мне нужно сделать один, два, три сверху, как четыре. Пожалуйста помочь
Пример здесь http://jsfiddle.net/Y7PhV/
Спасибо
html cssПоделиться Источник Joanhard 18 января 2013 в 18:33
2 ответа
- css white-space:nowrap ошибка горизонтальной прокрутки
У меня есть следующее markup <style type=text/css> #outer { min-height: 100%; height: auto !important; height: 100%; width:100%; white-space:nowrap; } #inner { background-color:#CCCCCC; margin:0px 4px 0px 4px; padding:5px 5px 0px 5px; border:1px solid #9A9A9A; border-width:1px 1px 0px 1px; }…
- против white-space:nowrap
Поделиться showdev 18 января 2013 в 18:39
0
Это css должно сработать…
ul {
width: 80px;
display: block;
/white-space: nowrap;/
/overflow: auto;/
}
li {
background: papayaWhip;
height: 40px;
width: 80px;
display: inline-block;
}
Поделиться fauverism 18 января 2013 в 18:40
Похожие вопросы:
white-space:nowrap перерывы display:table Я вот — вот сойду с ума. Я воспользовался поиском и Гуглом, но так и не смог придумать решение, оно не сработает 🙁 У меня есть div, вложенный в другие divs для автоматического вертикального…
white-space:nowrap; выпуск
У меня есть таблица внутри div, ширина div равна 100%, а ширина таблицы-200% с автоматическим переполнением. Теперь нормальное поведение таково: когда таблица отображается, пользователь должен…
white-space:nowrap вызывает выход содержимого за пределы ячейки
У меня есть td, где я объявляю white-space:nowrap; . Это предотвращает разрывы строк в тексте, но размер ячейки действительно учитывает отсутствующие разрывы строк, и текст выходит за пределы td….
css white-space:nowrap ошибка горизонтальной прокрутки
У меня есть следующее markup <style type=text/css> #outer { min-height: 100%; height: auto !important; height: 100%; width:100%; white-space:nowrap; } #inner { background-color:#CCCCCC;…
против white-space:nowrap
Я признаю, что у меня есть привычка использовать между словами, когда я не хочу, чтобы они ломались (например, заголовки таблиц). Должен ли я действительно стилизовать свой элемент с…
DataTables sScrollY + white-space:nowrap; сломан в Хроме 30.0.1599.69 м
После обновления до версии Google Chrome 30.0.1599.69 m сегодня я столкнулся с проблемой с sScrollY и white-space:nowrap; в jQuery DataTables. Заголовки достаточно широки, чтобы поместиться только в…
Текст с `white-space:nowrap ‘ переполняет div с ограниченной шириной
Можем ли мы сделать переполняющую текстовую оболочку ниже без полосы прокрутки и без изменения white-space:nowrap ? Вот CodePen
CSS контейнер = white-space:nowrap, дети = word-wrap:break-word
у меня есть проблема для set word-wrap:break-word Итак, это мой код : div { width:100%; white-space:nowrap; overflow-x:scroll; overflow-y:hidden; } blockquote { width:200px; display:inline-block;…
Как разбить текст внутри родительского div с помощью white-space:nowrap в CSS?
Я изо всех сил пытаюсь разбить текст внутри родительского div с помощью white-space:nowrap . Свойство word-wrap:break-word для якоря не работает. Я создал JSFiddle .
CSS — white-space:nowrap не предотвращает разрыв строки
Поэтому я пытаюсь поместить индикатор выполнения и кнопку в кнопку в одной строке, но по какой-то причине это не работает <button type=button class=btn btn-primary text-nowrap…
white-space | CSS | WebReference
Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre>, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу <pre>, но в отличие от него не меняет шрифт на моноширинный.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrapОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- normal
- Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
- nowrap
- Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление <br> переносит текст на новую строку.
- pre
- Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
- pre-line
- В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
- pre-wrap
- В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.
Действие значений на текст представлено в табл. 1.
| Значение | Перенос текста | Пробелы |
|---|---|---|
| normal | Переносится | Не учитываются |
| nowrap | Не переносится | Не учитываются |
| pre | Не переносится | Учитываются |
| pre-line | Переносится | Не учитываются |
| pre-wrap | Переносится | Учитываются |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>white-space</title> <style> .example { border: 1px dashed #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: «Courier New», Courier, monospace; /* Семейство шрифта */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы */ white-space: pre; /* Учитываются все пробелы и переносы */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Отображать как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ margin: 0; /* Убираем отступы */ white-space: nowrap; /* Переносов в тексте нет */ } </style> </head> <body> <p>Пример</p> <p> <html> <body> <b>Великая теорема Ферма</b><br> <i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br> где n — целое число > 2 </body> </html> </p> </body> </html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
Объект.style.whiteSpace
Примечание
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведёт себя как pre-line.
Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
В Firefox для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| normal | 5.5 | 12 | 1 | 4 | 1 | 1 |
| pre | 6 | 12 | 1 | 4 | 1 | 1 |
| nowrap | 5.5 | 12 | 1 | 4 | 1 | 1 |
| pre-wrap | 8 | 12 | 1 | 8 | 3 | 3 |
| pre-line | 8 | 12 | 1 | 9.5 | 3 | 3.5 |
| normal | 1 | 1 | 4 | 1 |
| pre | 1 | 1 | 4 | 1 |
| nowrap | 1 | 1 | 4 | 1 |
| pre-wrap | 1 | 4 | 9 | 3 |
| pre-line | 1 | 4 | 10 | 3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 14.11.2018
Редакторы: Влад Мержевич
Поговорим о свойстве white-space | CSS-Tricks по-русски
Поговорим о свойстве white-space
В CSS есть такое полезное свойство, как white-space, которое остаётся без внимания у начинающих верстальщиков. Возможно, вы обходились без него довольно долго, но однажды узнав, что это такое, и как его использовать, вы поймёте как много вы потеряли.
В этой статье я постараюсь описать, в чём разница между различными значениями свойства и как они могут быть использованы.
Немного об HTML.
В HTML, всякий раз когда вы оставляете подряд несколько пробелов (табов или переводов строки), браузер, по умолчанию, будет выводить их как один единственный пробел. Такое поведение позволяет браузеру отделять и размещать элементы наиболее удобным для прочтения способом.
Если вы хотите чтобы все ваши пробелы и переводы строк отображались как в исходном HTML, то вам необходимо использовать тег pre, всё содержимое которого будет отображаться в соответствии с исходным кодом страницы.
Кроме того, можно воспользоваться неразрывным пробелом ( ), в случае, если вам необходимо, чтобы строки не «схлопывались». Также, в предыдущих версиях HTML был тег nobr для таких целей. Сейчас этот тег не рекомендуется к использованию.
Свойство white-space — это шаг к семантически чистому HTML. Вы можете настроить обработку браузером пробелов, используя CSS.
Определение и возможные значения.
Свойство white-space предназначено для определения поведения браузера при обработке множественных пробелов и переводов строк. Конечно, обрабатываемая часть документа ограничивается CSS-селектором.
Ниже перечислены допустимые значения свойства с описанием каждого из них:
white-space: normal
Значение по умолчанию. Если оно установлено явно, то результатом будет обычный вывод, без использования тега pre. Как и в случае с большинством CSS-свойств, существует только одна причина использовать это значение, когда вы установили это свойство где-либо выше по иерархии свойств или элементов, для того чтобы вернуть обычное поведение элемента.
Повторяющиеся пробелы и разрывы строк игнорируются, для того чтобы наиболее естественно отобразить текст.
white-space: nowrap
Это наиболее используемое значение свойства, поскольку оно делает поведение браузера точно таким же, как и в случае со значением normal, за исключением того, что подавляются разрывы строк, даже в тех случаях когда выводимый текст получается шире чем контейнер для вывода.
Элемент, для которого значение свойства установлено как nowrap, не позволяет тексту и другим inline-элементам переносится естественным образом на новую строку. Вместо этого он продолжает вывод за своими границами, до тех пор, пока текст не закончится, оставляя его на одной линии. Это значение не оказывает никакого эффекта на повторяющиеся пробелы между словами, они по-прежнему «схлопываются» в один, как обычно.
Повторяющиеся пробелы игнорируются, переводы строк не используются, даже если текст не помещается в строке.
white-space: pre
Это значение работает именно так, как ожидается: точно также, как и содержимое тега pre. Все пробелы и переводы строк выводятся точно также как и в исходном HTML. Если какая-нибудь строка шире, чем её родитель, то она не будет разрываться, а будет выводится как одна строка.
Повторяющиеся пробелы и переводы строк выводятся так же как и в исходной разметке, естественные переводы строк не работают.
white-space: pre-line
Это свойство работает также как и normal, за исключением одного момента: переводы строк в исходной разметке являются значимыми. Таким образом, если в разметке между словами несколько пробелом, они будут проигнорированы как обычно, однако, если в разметке встречается перевод строки, при выводе, текст также будет перенесён на новую строку. Это значение не поддерживается в Internet Explorer до 7-ой версии, FireFox до 3-ей версии и Opera до версии 9.2.
Повторяющиеся пробелы игнорируются, переводы строк обрабатываюся.
white-space: pre-wrap
Это значение определяет такое же поведение как и значение pre, за тем исключением что строка переносится в соответствии с границами родительского элемента. Таким образом, текст будет переносится на новую строку, как это было бы при значении normal, а также будут считываться множественные пробелы и переводы строк исходного HTML. Это свойство не поддерживается в Internet Explorer до версии 7, а также FireFox до версии 3.
Обрабатываюся повторяющиеся пробелы и явные переводы строк, а также естественные переводы строк.
Варианты использования
Возможно, наиболее частый случай использования свойства white-space — это применение его к ссылке, которую вы не хотите переносить на новую строку.
На показанном скриншоте, ссылка «Read more »» кавычка (») перенеслась на новую строку, поскольку ей не хватило места. Этого можно избежать применив к ссылке значение nowrap. В этом случае ссылка будет перенесена на новую строку целиком, как неразрывный элемент. Обратите внимание, что свойство white-space было применено только к содержимому элемента. Поэтому ссылка и была перенесена на новую строку целиком. Текст внутри неё — неразрывен.
Заблуждения
У новичков вёрстки часто возникает недопонимание при использовании white-space: nowrap, в случае если они применяют его к inline-элементу и ожидают что он не будет переносится на новую строку. Стоит запомнить, что свойство применяется только к inline-элементам, которые находятся внутри элемента, к которому его применили, а также не оказывают никакого эффекта на блочные элементы и отступы между ними.
css — Проблема с nowrap и max-width на абсолютно позиционированном элементе
Я не совсем уверен, какова ваша цель, потому что происходит много противоречивых вещей. Но я постараюсь и, надеюсь, вы сможете направить меня к желаемому решению:
https://jsfiddle.net/q7dyf6xh/
.wrapper {
position: relative;
display: run-in;
}
.info {
position: absolute;
max-width: 200px;
white-space: pre-line;
}
Посмотрите на эту скрипку, поскольку вы можете видеть, что всплывающая подсказка теперь имеет максимальную ширину. Посмотрите, что я использую:
display: run-in;: отображает элемент в виде блока или встроенного в зависимости от контекста
white-space: pre-line;: последовательности пробелов будут свернуты в один пробел. Текст будет переноситься по мере необходимости и разрывов строк
Для лучшего понимания того, как все работает, смотрите здесь:
пробел : если вы используете nowrap , текст никогда не будет переноситься на следующая строка Текст продолжается в той же строке, пока не встретится тег!
Это сказало, что ваш max-width все еще работает, но с nowrap вы переполняете ваш элемент сейчас. Попробуйте дать своему элементу background-color, и вы увидите, что он на самом деле имеет такую же ширину, как ваш max-width.
Посмотрите здесь, как он переполняет элемент: https://jsfiddle.net/fcnh2qeo/
И теперь ширина overflow: hidden будет отображаться только текст внутри вашего поля. Все остальное отрезано! Смотрите здесь: https://jsfiddle.net/0qn4wxkg/
Теперь я использовал display: run-in; и white-space: pre-line;, а также max-width: 200px, который, надеюсь, даст вам желаемое решение. Не зная контекст и код, который вы используете, это скорее предположение, чем ответ. Но, может быть, я могу помочь вам найти решение, которое соответствует вашим потребностям
Ура!
значения normal, nowrap, pre, pre-wrap. Примеры использования white-space.
Изучая HTML вы должны были узнать, что браузеры игнорируют множественные пробелы и переносы строк в HTML-коде. С помощью тега <pre> можно изменить поведение браузера.
В CSS для управления пробелами в коде есть свойство white-space и оно даёт нам больше возможностей, чем тег <pre>.
Свойство white-space имеет четыре значения:
normal— обычный режим, значение по умолчанию.nowrap— текст отображается без переносов, всё содержимое растянется на одну строку;pre— аналог одноимённого тега, сохраняет пробелы и переносы как в исходном HTML-коде;pre-wrap— во всём аналогичен значениюpreза исключением того, что добавляются автоматические переносы, если текст не помещается в контейнер;
Давайте рассмотрим работу этих значений по отдельности.
white-space: normal
Значение white-space: normal — обычный режим, поэтому останавливаться подробнее тут не на чем.
white-space: nowrap
Значение nowrap запрещает браузеру переносить текст. При его использовании строка может выйти за пределы экрана, при этом появится горизонтальная полоса прокрутки.
Вот пример, как строка выезжает за пределы блока шириной 200 пикселей.
Механизм предназначенный для работы вечно остановился.
Свойство white-space: nowrap можно использовать при создании меню, когда крайне нежелательно чтобы пункт меню, состоящий из несколько слов, разрывался на две или более строки.
white-space: pre
Значение pre работает как одноимённый тег. Текст будет отображён в окне браузера так, как он написан в документе: все пробелы ипереносы строк будут сохранены.
Вот пример его использования:
<!DOCTYPE html>
<html>
<head>
<title>white-space: pre</title>
<style>
div.example{
white-space: pre;
width: 200px;
margin: 10px auto;
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div>
Всего есть 4 значения свойства white-space:
- normal
- nowrap
- pre
- pre-wrap
</div>
</body>
</html>Обратите вниманиена на пустое место над строкой, сюда:
Рисунок 1. Работа свойства white-space: pre.Его появление объясняется тем, что в HTML-коде между тегом <div> и текстом есть перенос строки. Чтобы убрать это пустое место, нужно текст течатать сразу после тега <div>. Новички иногда упускают из виду этот момент.
Нам в этом примере не помешал бы ещё и автоматический перенос строк. В таких случая применяется следующее значение — pre-wrap.
white-space: pre-wrap
Значение pre-wrap — работает во всём как и значение pre за исключением того, что добавляет автоматические переносы, если текст не помещается в контейнер.
Давайте рассмотрим работу значения pre-wrap на том же самом примере HTML-кода, меняем только это значение:
<!DOCTYPE html>
<html>
<head>
<title>white-space: pre-wrap</title>
<style>
div.example{
white-space: pre-wrap; /* меняем только это значение */
width: 200px;
margin: 10px auto;
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div>
Всего есть 4 значения свойства white-space:
- normal
- nowrap
- pre
- pre-wrap
</div>
</body>
</html>То есть, мы видим, что переносы строки происходят, как при использовании тега <pre>, и вместе с этим в поток текста добавляются автоматические переносы. Это и есть особенность значения значения pre-wrap.
Свойство white-space относится к разделу работа с текстом в CSS.
CSS свойство белого пространства
Пример
Продемонстрируйте различные значения свойства white-space:
p.a {white-space: nowrap;
}
p.b {
пробел: нормальный;
}
пк {
пустое пространство:
предварительно;
}
Определение и использование
Свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
| Значение по умолчанию: | нормальный |
|---|---|
| Унаследовано: | да |
| Анимируемое: | нет.Прочитать о animatable |
| Версия: | CSS1 |
| Синтаксис JavaScript: | объект .style.whiteSpace = «nowrap» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Объект | |||||
|---|---|---|---|---|---|
| белое пространство | 1.0 | 8,0 | 3,5 | 3,0 | 9,5 |
Синтаксис CSS
пробел: нормальный | nowrap | pre | pre-line | pre-wrap | initial | наследовать;
Стоимость объекта
| Значение | Описание | Играй |
|---|---|---|
| нормальный | Последовательности пробелов сведутся к одному пробелу. При необходимости текст будет перенесен.Это значение по умолчанию | Играй » |
| nowrap | Последовательности пробелов сведутся к одному пробелу. Текст никогда не переносится на следующую строку. Текст продолжается на той же строке до тех пор, пока
обнаружен тег | Играй » |
| до | Пробел сохраняется браузером. Текст будет переноситься только при переносе строки. Действует как
Тегв HTML |
Играй » |
| предварительная линия | Последовательности пробелов сведутся к одному пробелу.Текст будет переноситься при необходимости и при переносе строки | Играй » |
| предварительная упаковка | Пробел сохраняется браузером. Текст будет переноситься при необходимости и при переносе строки | Играй » |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальная | Играй » |
| наследовать | Наследует это свойство от своего родительского элемента.Читать про наследство |
Связанные страницы
УчебникCSS: CSS Text
Ссылка на HTML DOM: свойство whiteSpace
white-space - CSS: каскадные таблицы стилей
Свойство CSS white-space устанавливает способ обработки белого пространства внутри элемента.
Свойство указывает две вещи:
- Свертывается ли белое пространство и как.
- Может ли линии переноситься при возможности мягкого переноса.
пробел: нормальный;
белое пространство: nowrap;
белое пространство: предварительно;
белое пространство: предварительная упаковка;
пробел: перед строкой;
пробел: пробелы;
белое пространство: наследовать;
пробел: начальный;
белое пространство: вернуться;
белое пространство: отключено;
Свойство , пробел, задается как одно ключевое слово, выбранное из списка значений ниже.
Значения
-
нормальный - Последовательности пробелов свернуты. Символы новой строки в источнике обрабатываются так же, как и другие пробелы.Линии прерываются по мере необходимости, чтобы заполнить поля строк.
-
nowrap - Сворачивает пустое пространство, как для
нормальный, но подавляет разрывы строк (перенос текста) в исходном тексте. -
до - Последовательности пробелов сохраняются. Строки разрываются только в символах новой строки в источнике и в элементах
–. -
предварительная упаковка - Последовательности пробелов сохраняются. Строки разрываются на символах новой строки, на
–и по мере необходимости для заполнения строчных полей. -
предварительная линия - Последовательности пробелов свернуты. Строки разрываются на символах новой строки, на
–и по мере необходимости для заполнения строчных полей. -
перерыв - Поведение идентично поведению
с предварительной оберткой, за исключением того, что:- Любая последовательность сохраненных пробелов всегда занимает место, в том числе в конце строки.
- Возможность разрыва строки существует после каждого сохраненного символа пробела, в том числе между символами пробела.
- Такие сохраненные пространства занимают место и не свисают, и, таким образом, влияют на внутренние размеры блока (минимальный размер содержимого и максимальный размер содержимого).
В следующей таблице обобщено поведение различных значений белого пространства :
| Новые строки | Пробелы и табуляторы | Перенос текста | Пробелы в конце строки | Конец строки другие разделители пробелов | |
|---|---|---|---|---|---|
нормальный | Свернуть | Свернуть | Обертка | Удалить | Повесить |
nowrap | Свернуть | Свернуть | Без упаковки | Удалить | Повесить |
до | Заповедник | Заповедник | Без упаковки | Заповедник | Без упаковки |
предварительная упаковка | Заповедник | Заповедник | Обертка | Повесить | Повесить |
предварительная линия | Заповедник | Свернуть | Обертка | Удалить | Повесить |
перерыв | Заповедник | Заповедник | Обертка | Обертка | Обертка |
Банкноты
Существует различие между пробелами и другими разделителями пробелов .Они определены следующим образом:
- места
- Пробелы (U + 0020), табуляции (U + 0009) и разрывы сегментов (например, новые строки).
- прочие разделители пространства
- Все остальные разделители пробелов, определенные в Юникоде, кроме тех, которые уже определены как пробелы.
Если пустое пространство обозначается как , висит , это может повлиять на размер поля при измерении внутреннего размера.
нормальный | предварительно | nowrap | предварительная упаковка | предварительная линия | пробелы
Базовый пример
код {
белое пространство: предварительно;
} Разрывы строк внутри элементов
pre { белое пространство: предварительная упаковка; }В действии
HTML
Lorem ipsum dolor sit amet, consctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.
Результат
таблиц BCD загружаются только в браузере
html - CSS NoWrap on Text
На этот вопрос уже есть ответы :
Закрыт 3 года назад.
У меня есть карточка с кучей текста внутри. Некоторые из них длинные, и они переносятся на следующую строку, например,
.Я хочу, чтобы текст оставался на одной строке и становился многоточием, если это необходимо для всплывающей подсказки. Так что вроде "отказался ответить ..." и т. Д.
Я использовал flex и angular-material, чтобы настроить это в настоящее время.
Вещей, которые я пробовал:
Установка следующих свойств css:
переполнение текста: многоточие; белое пространство: nowrap; переполнение: скрыто;При этом текст больше не будет переполняться, но многоточие не применяется.
Вот HTML
Вот код CSS:
.card { отступ: 0; ширина: 225 пикселей; маржа: 15px 15px 0 15px; } .card-initials { дисплей: гибкий; Flex-wrap: nowrap; цвет фона: # D3DCE5; нижняя граница: # afbfd0 1px solid; } .card-initials span { выравнивание текста: центр; ширина: наследовать; высота строки: 225 пикселей; размер шрифта: 72 пикселей; } .card-info { маржа сверху: 15 пикселей; } .mat-card-header-text { маржа: 0; нижнее поле: 10 пикселей; font-weight: жирный; } .info-heading { цвет: # 728ba7; } .info-heading-padded { padding-top: 13 пикселей; } .mat-card-header-text a { float: right; шрифт: нормальный; размер шрифта: 12 пикселей; текстовое оформление: нет; цвет: # 58708d; } .tooltip { заполнить: # 333333; }html - Как исправить CSS "White-space: nowrap" в таблице?
html - Как исправить CSS "White-space: nowrap" в таблице? - Переполнение стекаПрисоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил
Просмотрено 14к раз
На этот вопрос уже есть ответы :
Закрыт 2 года назад.
Я хотел бы показать многоточие с переполнением текста, если описание слишком длинное для столбца. Однако я не уверен, почему мой код не работает. Я добавил! Это важно в случае, если есть какие-то внутренние файлы CSS, которые могли переопределять мой материал CSS. Прямо сейчас весь текст добавлен в одну строку кода в описании и имеет ширину 400 пикселей. [! [Колонка описания] [1]] [1]
@foreach (элемент var в модели) { // ЭТА СТРОКА НЕ РАБОТАЕТ @Html.DisplayNameFor (модель => model.WorkOrderNumber) @ Html.DisplayFor (modelItem => item.Description) так далее....Создан 22 апр.
HJ1990HJ199031711 золотой знак22 серебряных знака1414 бронзовых знаков
0Вам нужно обернуть текст внутри
divв тегtdи применить ниже css-е>.truncate, td> .truncate { ширина: авто; минимальная ширина: 0; максимальная ширина: 200 пикселей; дисплей: встроенный блок; переполнение: скрыто; переполнение текста: многоточие; белое пространство: nowrap; }вы можете изменить ширину, как хотите
стол, тд, тыс { граница: 1px solid #ddd; выравнивание текста: слева; } Таблица { граница-коллапс: коллапс; ширина: 100%; } th, td { отступ: 15 пикселей; } th> .truncate, td> .truncate { ширина: авто; минимальная ширина: 0; максимальная ширина: 200 пикселей; дисплей: встроенный блок; переполнение: скрыто; переполнение текста: многоточие; белое пространство: nowrap; }<таблица>Создан 22 апр.
РахулРахул4,00611 золотых знаков77 серебряных знаков1010 бронзовых знаков
0lang-html
Stack Overflow лучше всего работает с включенным JavaScriptВаша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
CSS свойство white-space | DigitalOcean
Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение.Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, используя кнопку «сообщить о проблеме» в нижней части руководства.
white-space - это свойство CSS, которое помогает управлять обработкой пробелов и разрывов строк в тексте элемента.
Свойство white-space может принимать следующие значения:
- нормальный: значение по умолчанию. Несколько пробелов сворачиваются в один. При необходимости текст переносится на следующую строку.
- nowrap: несколько пробелов сворачиваются в один, но текст не переносится на следующую строку. Мы уже обсуждали, как использовать значение nowrap для предотвращения разрывов строк.
- pre: те же результаты, что и при использовании
, где все пробелы будут сохранены как есть, а текст будет переноситься только тогда, когда в содержимом есть разрывы строк.- перед строкой: несколько пробелов сворачиваются в один, текст переносится на следующую строку при необходимости или с переносами строк в содержимом.
- pre-wrap: аналогично pre, но текст также переносится при необходимости.
белое пространство: нормальное
Медузафиш-полосатая морская собачка, сайра, белуха, белуга, осетр. Индийский Mul mora cisco masu, лосось, петух-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь, двустворчатый гигантский данио Сакраменто
белое пространство: nowrap
Медузафиш-полосатая морская собачка, сайра, белуха, белуга, осетр. Индийский лосось Mul mora cisco masu, петушиная акула-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь Сакраменто, двустворчатый гигантский данио.
белое пространство: до
Здесь я вручную включил разрывы строк и лишние пробелы. Обратите внимание на дополнительный разрыв строки в начале. Это потому, что в разметке текст начинается со строки после элемента
.
Медузафиш полосатая киллифиш каторжная собачка сайра нитхвост белуга осетр. Индийский Mul mora cisco masu, лосось, петух-реквием, акула, длиннонос, ланцет, синяя рыба, красный луциан Сакраменто, гигантский двуногий данио.
предварительная линия
Здесь текст прерывается при необходимости, но я также вручную сломал несколько последних слов.Я добавил те же лишние пробелы, но теперь они свернуты.
Медузафиш-полосатая морская собачка, сайра, белуха, белуга, осетр. Индийский лосось Mul mora cisco masu, петушиная акула-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь Сакраменто, двустворчатый гигантский данио.
предварительная упаковка
Теперь лишние пробелы не удаляются.
Медузафиш-полосатая морская собачка, сайра, белуха, белуга, осетр. Индийский лосось Mul mora cisco masu, петушиная акула-реквием, длинноносая, ланцетная рыба, синяя рыба, красный окунь Сакраменто, двустворчатый гигантский данио.
Пробел - Попутный ветер CSS
Нормальный
Используйте
пробел-нормальный, чтобы текст в элементе переносился нормально. Новые строки и пробелы будут свернуты.Lorem ipsum dolor sit amet, conctetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, репретендерит саепе квам жидкий одио аккусамус.
Без переноса
Используйте
whitespace-nowrap, чтобы предотвратить перенос текста внутри элемента. Новые строки и пробелы будут свернуты.Lorem ipsum dolor sit amet, conctetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, репретендерит саепе квам жидкий одио аккусамус.
Pre
Используйте пробелы
перед, чтобы сохранить символы новой строки и пробелы в элементе. Текст не переносится.Lorem ipsum dolor sit amet, conctetur adipisicing elit.Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, репретендерит саепе квам жидкий одио аккусамус.
Pre Line
Используйте пробел
перед строкой, чтобы сохранить символы новой строки, но не пробелы внутри элемента.Текст будет обернут обычным образом.Lorem ipsum dolor sit amet, conctetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, репретендерит саепе квам жидкий одио аккусамус.
Pre Wrap
Используйте
whitespace-pre-wrapдля сохранения новых строк и пробелов внутри элемента. Текст будет обернут обычным образом.Lorem ipsum dolor sit amet, conctetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, репретендерит саепе квам жидкий одио аккусамус.
Адаптивный
Чтобы управлять свойством пробелов элемента только в определенной точке останова, добавьте префикс
{screen}:к любой существующей утилите пробелов. Например, добавление классаmd: whitespace-preк элементу приведет к применению утилитыwhitespace-preпри средних размерах экрана и выше.Дополнительную информацию о функциях адаптивного дизайна Tailwind можно найти в документации по адаптивному дизайну.
Настройка
Варианты
По умолчанию для утилит с пробелами генерируются только адаптивные варианты.
Вы можете контролировать, какие варианты генерируются для служебных программ пробелов, изменив свойство
пробелв разделевариантыпопутного ветра.config.jsфайл.Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:
module.exports = { варианты: { продлевать: { + пробел: ['hover', 'focus'], } } }Если вы не планируете использовать утилиты пробелов в своем проекте, вы можете полностью отключить их, установив для свойства
whitespaceзначениеfalseв разделеcorePluginsвашего файла конфигурации:модуль.export = { corePlugins: { + пробел: ложь, } }CSS Nowrap: свойство белого пространства
Точно так же, как люди из другого времени сохраняют старые привычки и устаревшие методы, так и программисты, работающие с CSS, иногда хотят сохранить саму кодировку кода. В CSS nowrap - одно из нескольких возможных значений для свойства White Space. Если вы хотите управлять поведением разрывов строк по умолчанию, вкладок и других присущих изгибов, вы убираете старое свойство «пустое пространство» и вспоминаете. Nowrap - это наша функциональная презентация, которая подавляет «нормальный» перенос текста, но другие значения белого пространства тесно связаны, просты в использовании и, без сомнения, найдут особое место в этом старомодном сердце. Зрение не то, что раньше? Узнайте больше о макете и дизайне CSS в этом классе для всех уровней квалификации.
Свойство «Пустое пространство» позволяет точно настроить перенос элемента. Значение по умолчанию для пустого пространства является нормальным, что означает, что элемент, такой как текст абзаца, будет предсказуемо завершен стандартным выравниванием, как абзацы в этом сообщении в блоге.Текст знает, что когда он встречает другой элемент (рисунок выше), он должен перейти к следующей строке, тем самым избегая наложения. Давайте выберем пример текста для нашего абзаца. Это будет наш HTML:
Куда идет мир? Первые пишущие машинки, потом компьютеры, теперь это?
Мы будем использовать объявление размера табуляции для определения наших вкладок:
p { граница: 1px solid # 000000; отступ: 4 пикселя; ширина: 250 пикселей; }Довольно стандартная штука.Сейчас подходящее время для ознакомления с синтаксисом. В первом примере я покажу настройки по умолчанию (нормальные), чтобы мы могли установить точку отсчета. По определению, обычное значение сворачивает последовательности пробелов в один пробел, а текст инстинктивно переносится:
с { пробел: нормальный; }Это почти слишком просто. Но в результате получается именно то, к чему мы привыкли: идеально оформленный текст с полями:
Пока все хорошо.Вы, наверное, заметили, что разрывы строк до и после нашего HTML-текста (то есть текст не был написан:
Когда-то…
) также были удалены, чтобы граница отображалась надлежащим образом. Это идеальная картина. Так что принесите свой костюм Уорхола и изучите искусство черно-белой фотографии.Nowrap
Далее идет наше значение заголовка: nowrap . Nowrap - это ближайшее значение белого пространства, равное по внешнему виду , что является полной противоположностью нормальному.Хотя последовательности пробелов по-прежнему превращаются в один пробел, текст никогда не переносится на следующую строку (никогда не говорите никогда, потому что есть одно исключение: текст будет продолжаться вечно, если он не встретит тег
). Таким образом,с { белое пространство: nowrap; }дает следующий результат:
Действительно, странно. Еще раз обратите внимание на то, как строки разрываются до и после того, как текст (в данном случае пробел) был свернут. Свойство White Space поддерживается последними версиями всех основных браузеров, но, как и большинство свойств CSS, его значение «наследования» не поддерживается в Internet Explorer 7 и более ранних версиях, и в целом HTML в этих ранних версиях IE, как известно, содержит ошибки.Старые версии Opera и Safari также столкнутся с трудностями с двумя значениями, которые скоро будут обсуждаться: pre-wrap и pre-line .
Осталось три оставшихся значения белого пространства, которые легко понять после сравнения нормального и теперь .
до
Pre сохраняет пробелы, разрывы строк и табуляции, но не переносит текст. Другими словами, до точно следует исходному HTML. По определению, до больше всего напоминает полную противоположность нормального (представьте себя человеком типа до - что угодно, кроме нормального - узаконивайте себя физическим пониманием нашего странного мира).Это заставляет элемент вести себя как тег
в HTML. Pre заставляет разрывы строк и пустое пространство, сжатое nowrap , чтобы появиться:На этот раз, выше и ниже текста, обратите внимание на интервал, как в нашем исходном HTML. И, как я упоминал ранее, иногда вы хотите сохранить кодировку кода; это особенно полезно для обучения. Кроме того, код и так достаточно мягкий (без обид), так что небольшое форматирование не повредит; здесь и там красивая, красочная кайма…
Предварительная упаковка
Если вам нравится все в до , за исключением того факта, что он не переносит текст (на самом деле, он добавляет разрывы строк, как вы увидите ниже), pre-wrap - мой подарок вам.Ограничьте до его элементом:
Предварительная линия
Не можете выбрать одно из вышеперечисленных значений? Возьмите образец каждого с pre-line . Это сохраняет разрывы строк, такие как до и с предварительным переносом , сворачивает пробелы и вкладки, такие как nowrap и normal , и переносит текст, как normal и pre-wrap . Это сложный способ сказать, что pre-line - это pre-wrap без сохранения пробелов и табуляций.Посмотрите:
Сначала может быть трудно вспомнить, какое значение что делает, поэтому для удобства обратитесь к этой таблице для быстрого обзора различного поведения значений белого пространства:
Этот стол станет вашим лучшим другом. Попытка выяснить, какое значение белого пространства использовать, сравнивая изображения, может привести к ужасной путанице. Если вы прищурились, примите своего внутреннего садиста и испытайте себя с помощью CSS и HTML для мобильных устройств.Но на данный момент у вас должно быть много вещей, чтобы занять вас. Это был довольно простой пример, но, как и большинство инструментов CSS, сила находится в руках человека.
Страница Последнее обновление: январь 2014 г.
.