Nowrap css: white-space | htmlbook.ru

Содержание

white-space | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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.

Табл. 1. Перенос текста и пробелы при разных значениях white-space
ЗначениеПеренос текстаПробелы
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>
   &lt;html&gt;
   &lt;body&gt;
   &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   где n - целое число &gt; 2
   &lt;/body&gt;
   &lt;/html&gt;
  </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
Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы <br>.
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; }...

  • &nbsp; против white-space:nowrap

    Я признаю, что у меня есть привычка использовать &nbsp; между словами, когда я не хочу, чтобы они ломались (например, заголовки таблиц). Должен ли я действительно стилизовать свой элемент с помощью 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;...


&nbsp; против white-space:nowrap

Я признаю, что у меня есть привычка использовать &nbsp; между словами, когда я не хочу, чтобы они ломались (например, заголовки таблиц). Должен ли я действительно стилизовать свой элемент с...


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.

Табл. 1. Перенос текста и пробелы при разных значениях white-space
Значение Перенос текста Пробелы
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> &lt;html&gt; &lt;body&gt; &lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt; &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; = Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt; где n - целое число &gt; 2 &lt;/body&gt; &lt;/html&gt; </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, всё содержимое которого будет отображаться в соответствии с исходным кодом страницы.

Кроме того, можно воспользоваться неразрывным пробелом (&nbsp;), в случае, если вам необходимо, чтобы строки не «схлопывались». Также, в предыдущих версиях 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&gt можно изменить поведение браузера.

В CSS для управления пробелами в коде есть свойство white-space и оно даёт нам больше возможностей, чем тег <pre&gt.

Свойство 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&gt и текстом есть перенос строки. Чтобы убрать это пустое место, нужно текст течатать сразу после тега <div&gt. Новички иногда упускают из виду этот момент.

Нам в этом примере не помешал бы ещё и автоматический перенос строк. В таких случая применяется следующее значение — 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>
Рисунок 2. Работа свойства white-space: pre-wrap.

То есть, мы видим, что переносы строки происходят, как при использовании тега <pre&gt, и вместе с этим в поток текста добавляются автоматические переносы. Это и есть особенность значения значения 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

  
......
<карта>
Личная информация
<метка> {{profile.dateOfBirth | дата}}

Вот код 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]

  
<таблица> @Html.DisplayNameFor (модель => model.WorkOrderNumber) @foreach (элемент var в модели) { // ЭТА СТРОКА НЕ РАБОТАЕТ @ Html.DisplayFor (modelItem => item.Description) так далее....

Создан 22 апр.

HJ1990HJ1990

31711 золотой знак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;
}  
  <таблица>
  
    
Имя
Адрес
Сборы
ipsum или lipsum, как его иногда называют, является фиктивным текстом, используемым при разметке печатных, графических
Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при раскладке печатных, графических изображений.
$100
Лойс
фиктивный текст, используемый в макете печати, графики
$150
Джо
Lipsum, как это иногда называют, это фиктивный текст, используемый в макете печати, графики
$300

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *