Содержание

Атрибут nowrap | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Добавление атрибута nowrap к тегу <td> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение атрибута nowrap осуждается.

Синтаксис

<td nowrap>...</td>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут nowrap не установлен.

Аналог CSS

white-space

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут nowrap</title>
 </head>
 <body>

  <table>
   <tr>
    <td nowrap>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate 
     velit esse molestie consequat, vel illum dolore eu feugiat nulla 
     facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
     praesent luptatum zzril delenit au gue duis dolore te feugat nulla 
     facilisi.
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.</td> </tr> </table> </body> </html>

Почему этот CSS nowrap не работает?



Я пытаюсь удержать div bar_top_container от обертывания его содержимого независимо от того, насколько широка страница (т. е. оба выбора должны всегда появляться на одной и той же строке), это не работает, однако, когда ширина страницы слишком мала для того, чтобы они оба поместились на одной строке, как я могу это исправить?

Стили:

#bar_top_container { position: relative; white-space: nowrap; }
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; }
#clear { clear: both; }

HTML:

<div>
 <div>
  <span>select1:  </span>
   <select><option value="asdf">asdf</option></select>
 </div>
 <div>
  <span>asdf: </span>
   <select><option value="blah">-- select action --</option></select>
 </div>
 <div></div>
</div>
html css
Поделиться Источник user318747     30 июня 2010 в 15:01

3 ответа


  • html table пробел: nowrap не работает?

    У меня есть шаблон KnockoutJS, который создает input[type=text] и select рядом друг с другом без <br/> между ними. Однако это ставит разрыв линии между даже с white-space: nowrap; я в настоящее время тестирую в chrome. CSS : table.grid tbody tr td { padding: 0px 0px 0px 0px; margin: 0px 0px…

  • CSS переход с nowrap не является гладким

    Я пытаюсь разрешить CSS переход боковой панели, лучше всего описанный как это изображение: В то время как в одной строке {white-space: nowrap} работает великолепно, у меня возникают проблемы с обеспечением плавной анимации свернутой боковой панели, поскольку линии, кажется, ломаются.



17

Вы можете иметь как block , так и inline свойств для элемента, если вы отображаете его как … inline-block !

Вот ваш код исправлен и работает:

  • span.bold-это label с

  • a label связан со своим элементом form через атрибуты for / id

  • bar_top_block is an id used twice. Should be a class

  • нет необходимости в float: left; , так как используется display: inline-block;

  • таким образом, нет необходимости и в клиринговом элементе

  • элементы .bar_top_block также отображаются встроенно, поэтому любой whitespace между ними отображается как whitespace. Чтобы избежать этого, я добавил комментарий, который избегает любого whitespace, хотя все еще позволяет читать код HTML. Текст внутри — «no whitespace«, поэтому разработчик будет знать, что этот комментарий существует по какой-то причине и не должен быть удален 🙂

  • вы можете удалить width на body , это просто здесь для примера

  • вы можете играть со свойством overflow в контейнере

  • поскольку IE7 и ниже не понимают значения inline-block для блочных элементов, таких как div, вы должны использовать display: inline и дать элементу hasLayout , например, zoom: 1;

  • лучший способ нацелиться на IE7 и ниже и только на эти браузеры-с условным комментарием

  • Я добавил поддержку Fx2, но это только по историческим причинам 🙂 .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Stack Overflow 3150509 - Felipe</title> <style type="text/css"> body { width: 300px; } #bar_top_container { overflow: auto; white-space: nowrap; border: 1px solid red; } .bar_top_block { display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */ display: inline-block; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; } </style> <!--[if lte IE 7]><style type="text/css"> .bar_top_block { display: inline; zoom: 1; } </style> <![endif]--> </head> <body> <form method="post" action="#"> <div> <label for="select1">Obviously I am a label: </label> <select><option value="asdf">asdf</option></select> </div><!-- no whitespace --><div> <label for="select2">I'm a label too and I need a for attribute: </label> <select><option value="blah">-- select action --</option></select> </div> </form> </body> </html>

Поделиться FelipeAls     30 июня 2010 в 17:38



3

Перенос плавающих элементов как white-space: nowrap не работает для блочных элементов, а только для встроенных элементов и текста.

Поделиться jantimon     30 июня 2010 в 15:03



-1

Я предлагаю использовать действительную форму использования:

<form>
  <label>select1: <select><option value="asdf">asdf</option></select></label>
  <label>asdf: <select><option value="blah">-- select action --</option></select></label>
</form>

Надеюсь, это поможет.

Поделиться Slavik Meltser     20 декабря 2012 в 15:53


  • CSS «Nowrap» не работает должным образом

    В настоящее время я создаю шаблон email. Шаблон содержит USP-Е, которые выстроены рядом друг с другом. Это код, который я использую: <td width=100%> <span style=white-space: nowrap;> <img src=checkmark.png />&nbsp;&nbsp;[text name=USP1] </span>…

  • Почему этот css не работает на Firefox?

    Я пытаюсь изменить стиль моего файла входного типа. Следующий CSS хорошо работает на Chrome и Opera, но не на Mozilla Firefox. HTML <input type=file class=custom-file-input /> CSS .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content:…


Похожие вопросы:


Firefox CSS проблема nowrap

Я пытаюсь создать горизонтальный (без разрывов строк) неупорядоченный список изображений на моем сайте, используя следующий код: <ul class=ImageSet> <li> <img src=blah> </li>…


CSS white-space nowrap IE терпит неудачу, но работает Firefox/Chrome

Я никак не могу понять, в чем дело. В firefox/chrome я могу успешно использовать nowrap и overflow-x, но не в IE. Вот соответствующий блок кода для отключения обертывания… #code_block {…


Почему этот вложенный код css не работает?

Если у меня есть что-то вроде приведенного ниже кода, я бы ожидал, что моя ссылка будет красного цвета с большими шрифтами, однако она не работает. .footer { text-align: center; } .footer a { color:…


html table пробел: nowrap не работает?

У меня есть шаблон KnockoutJS, который создает input[type=text] и select рядом друг с другом без <br/> между ними. Однако это ставит разрыв линии между даже с white-space: nowrap; я в.

..


CSS переход с nowrap не является гладким

Я пытаюсь разрешить CSS переход боковой панели, лучше всего описанный как это изображение: В то время как в одной строке {white-space: nowrap} работает великолепно, у меня возникают проблемы с…


CSS «Nowrap» не работает должным образом

В настоящее время я создаю шаблон email. Шаблон содержит USP-Е, которые выстроены рядом друг с другом. Это код, который я использую: <td width=100%> <span style=white-space: nowrap;>…


Почему этот css не работает на Firefox?

Я пытаюсь изменить стиль моего файла входного типа. Следующий CSS хорошо работает на Chrome и Opera, но не на Mozilla Firefox. HTML <input type=file class=custom-file-input /> CSS…


CSS: IE: пробел: nowrap не работает

Т. е. не реагирует должным образом, чтобы без переноса атрибута CSS. Вопрос: Как сделать так, чтобы это работало в IE, чтобы оно отображалось как результат рендеринга Chrome?…


опция noWrap на tilelayer работает только частично

Чтобы предотвратить многократное дублирование карт мира на самом высоком уровне масштабирования, я использую опцию noWrap=true . Он работает хорошо, но только на левой стороне карты (серая область),…


Flexbox «nowrap» значение не работает

Это тот раздел моего кода, который не работает: .copyright { display: flex; flex-wrap: nowrap; /* This is not working */ color: red; } <link rel=stylesheet…

flex-flow | CSS справочник

Поддержка браузерами

11.0+ 28.0+ 29.0+ 17.0+ 9.0+

Описание

CSS свойство flex-flow позволяет задать значения свойств flex-direction и flex-wrap в одном месте. То есть свойство flex-flow контролирует сразу и направление расположения flex-элементов и перенос.

Примечание: если элемент не является flex-контейнером (display: flex), свойство flex-flow будет проигнорировано.

Значение по умолчанию: row nowrap
Применяется: к flex-контейнерам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.flexFlow=»column nowrap»;

Синтаксис

flex-flow: flex-direction flex-wrap;

Значения свойства

Значение Описание
flex-direction Возможные значения:
  • row
  • row-reverse
  • column
  • column-reverse
Значение по умолчанию row.
flex-wrap Возможные значения: Значение по умолчанию nowrap.

Пример

#main {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-flow: row nowrap;
}

CSS white-space



Пример

Демонстрация различных значений свойства «white-space»:

p.a {
    white-space: nowrap;
}

p.b {
    white-space: normal;
}

p.c {
    white-space: pre;
}


Определение и использование

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

Значение по умолчанию: normal
Inherited: yes
Animatable: no. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.whiteSpace=»nowrap»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
white-space 1.0 8.0 3.5 3.0 9.5


Синтаксис CSS

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

Значения свойств

Значение Описание
normal Последовательности пробелов будут свернуты в один пробел. Текст будет обернут при необходимости. Это значение по умолчанию
nowrap Последовательности пробелов будут свернуты в один пробел. Текст никогда не будет переноситься на следующую строку. Текст продолжается в той же строке до тех пор, пока не будет обнаружен тег <br>
pre Пробелы сохраняются обозревателем. Текст будет только обернуть на разрывы строк. Действует как тег <PRE> в HTML
pre-line Последовательности пробелов будут свернуты в один пробел. Текст будет переноситься при необходимости, а на разрыв строки
pre-wrap Пробелы сохраняются обозревателем. Текст будет переноситься при необходимости, а на разрыв строки
initial Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit Наследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справочник: CSS Text

HTML DOM Справочник: whiteSpace Свойство


Свойство white-space — разрывы строк длинного текста, пробелы между словами

Свойство white-space устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат Enter при наборе кода).

Синтаксис

селектор { white-space: nowrap | pre | pre-line | pre-wrap | normal; }

Значения

Значение Описание
nowrap Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку.
pre Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер — текст просто вылезет за его границы.
Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство font-family).
pre-wrap То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку.
pre-line Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк).
normal Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране.

Значение по умолчанию: normal.

Пример . Значение nowrap

В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение nowrap:

<div> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div> #elem { width: 200px; white-space: nowrap; border: 1px solid red; }

:

Пример .

Значение nowrap и тег br

Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br):

<div> Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire. </div> #elem { width: 200px; white-space: nowrap; border: 1px solid red; }

:

Пример . Значение pre

В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab, с Enter и так далее):

<div> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div> #elem { width: 200px; white-space: pre; border: 1px solid red; }

:

Пример . Значение pre-wrap

А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:

<div> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div> #elem { width: 200px; white-space: pre-wrap; border: 1px solid red; }

:

Смотрите также

  • свойства word-break и overflow-wrap,
    которые позволяют перенести буквы длинного слова на новую строку
  • свойство tab-size,
    которое устанавливает размер отступа, созданного клавишей Tab
  • свойство hyphens,
    которое включает переносы слов по слогам
  • свойство overflow,
    которое обрезает вылезающие за границу блока части
  • тег pre,
    который показывает текст так, как он был набран в редакторе HTML кода

значения 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.

PRE и NOWRAP в CSS — свойство white-space: pre-wrap, nowrap, pre-line

19 февраля 2010 Рубрика: HTML&CSS, Важные мелочи

Пишу в качестве напоминания, что в CSS есть аналог тегов <PRE> и <NOBR>, а также свойства таблиц NOWRAP — название ему white-space. Это свойство устанавливает, как отображать пробелы в тексте, а именно:

  1. white-space: normal. Значение по умолчанию, текст ведёт себя как обычно.

  2. white-space: nowrap. Текст идёт одной строкой, переносов не происходит, за исключением вручную расставленных, например, тегом <br>. Если обрамить текст тегом nobr (<nobr>текст</nobr>), то мы получим тот же эффект, что и через свойство css. Аналогично достигается в таблице путём дописки параметра nowrap в теге td. Так что всё на вкус и на цвет, а что использовать — решать вам.

  3. white-space: pre. Выводит текст с пробелами и переносами, как оно было оформлено в коде html. Если строка будет слишком длинной и не помещаться в окно браузера, то появится горизонтальная полоса прокрутки. Имеется два нюанса: 1) аналогом является тег <pre>, но, в отличие от него, не меняет шрифт на моноширинный; 2) не работает в IE6 и младше; 3) работает в  IE7 только при указании <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>.

  4. white-space: pre-wrap. Выводит текст с пробелами и переносами, но если строка слишком длинная, то происходит перенос. Не поддерживается IE7 и младше.

  5. white-space: pre-line. Выводит текст с переносами, как было в коде html, но дополнительные пробелы игнорируются (последовательность пробелов отображается как один пробел). Линии также подгоняются по размеру. Не поддерживается IE7 и младше.

В общем, white-space: pre и white-space:nowrap имеют место для частого использования (особенно второй, так как кроссбраузерен), а два последних под вопросом. Тем не менее.

 

В рамках white-space опишу одну проблему, возникающую с хайлайтерами (скрипты, которые подсвечивают код в блогах) — текст в тегах PRE не переносится, а скролится. Для этого был создан универсальный метод (ссылка на оригинал), который я ниже и приведу.

pre {
      white-space: pre;           /* CSS2 */
      white-space: pre-wrap;      /* CSS 2.1 */
      white-space: pre-line;      /* CSS 2.1/3 */
      white-space: -moz-pre-wrap; /* Mozilla */
      white-space: -hp-pre-wrap;  /* HP printers */
      white-space: -o-pre-wrap;   /* Opera 7 */
      white-space: -pre-wrap;     /* Opera 4-6 */
      word-wrap: break-word;      /* Только для динозавра IE */
}

Это наиболее полный код, однако и его можно сократить. Для начала удалим вторую строку, так как она бесполезна — зачем говорить тегу pre, чтобы он вёл себя как тег pre. Четвёртую строку тоже можно удалить, так как свойство удаляет дополнительные пробелы, а они нужны. Шестую строку также можно опустить, сами догадайтесь почему. По большому счёту можно вообще оставить только третью и девятую строки, так как даже седьмая опера уже канула в лету.

 

Пожалуй это всё, что нужно знать о white-space. До новых встреч! =)

CSS

Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

white-space — CSS: каскадные таблицы стилей

Свойство CSS white-space определяет способ обработки пустого пространства внутри элемента.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Свойство указывает две вещи:

  • Свертывается ли белое пространство и как.
  • Могут ли линии переноситься при возможности мягкого переноса.
 
пробел: нормальный;
белое пространство: nowrap;
белое пространство: предварительно;
белое пространство: предварительная упаковка;
пробел: предварительная строка;
пробел: пробелы;


белое пространство: наследовать;
пробел: начальный;
белое пространство: отключено;
  

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

Значения

нормальный
Свертываются последовательности пробелов.Символы новой строки в источнике обрабатываются так же, как и другие пробелы. Линии прерываются по мере необходимости, чтобы заполнить строчные поля.
nowrap
Сворачивает пробелы, как для , нормальный , но подавляет разрывы строк (перенос текста) в исходном тексте.
до
Последовательности пробелов сохраняются. Строки прерываются только в символах новой строки в источнике и в элементах .
предварительная упаковка
Последовательности пробелов сохраняются.Строки разрываются на символах новой строки, и по мере необходимости для заполнения строчных полей.
предварительная линия
Свертываются последовательности пробелов. Строки разрываются на символах новой строки, и по мере необходимости для заполнения строчных полей.
перерывов
Поведение идентично поведению pre-wrap , за исключением того, что:
  • Любая последовательность сохраненных пробелов всегда занимает место, в том числе в конце строки.
  • Возможность разрыва строки существует после каждого сохраненного символа пробела, в том числе между символами пробела.
  • Такие сохраненные пространства занимают место и не свисают, что влияет на внутренние размеры бокса (минимальный размер содержимого и максимальный размер содержимого).

В следующей таблице обобщено поведение различных значений белого пространства :

Новые строки Пробелы и табуляции Перенос текста Пробелы в конце строки Конец строки другие разделители пробелов
нормальный Свернуть Свернуть Обертка Удалить Повесить
nowrap Свернуть Свернуть Без упаковки Удалить Повесить
до Заповедник Заповедник Без упаковки Заповедник Без упаковки
предварительная упаковка Заповедник Заповедник Обертка Повесить Повесить
предварительная линия Заповедник Свернуть Обертка Удалить Повесить
перерыв Заповедник Заповедник Обертка Обертка Обертка
Банкноты

Существует различие между пробелами и другими разделителями пробелов . Они определены следующим образом:

мест
Пробелы (U + 0020), табуляции (U + 0009) и разрывы сегментов (например, новые строки).
прочие разделители пространства
Все остальные разделители пробелов, определенные в Юникоде, кроме тех, которые уже определены как пробелы.

Если пустое пространство обозначается как , вешает , это может повлиять на размер поля при измерении внутреннего размера.

 нормальный | предварительно | nowrap | предварительная упаковка | предварительная линия | пробелы 

Базовый пример

  код {
  белое пространство: предварительно;
}  

Разрывы строк внутри элементов

  
  pre {
  белое пространство: предварительная упаковка;
}  

В действии

HTML
  

Lorem ipsum dolor sit amet, conctetur 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;
    font-weight: нормальный;
    размер шрифта: 12 пикселей;
    текстовое оформление: нет;
    цвет: # 58708d;
}

.tooltip {
    заполнить: # 333333;
}
  

переполнение текста | CSS-уловки

Свойство text-overflow в CSS имеет дело с ситуациями, когда текст обрезается, когда он выходит за пределы поля элемента.Его можно обрезать (т.е. обрезать, скрыть), отображать многоточие («…», значение диапазона Unicode U + 2026) или отображать строку, определенную автором (в настоящее время браузер не поддерживает строки, определенные автором).

  .ellipsis {
  переполнение текста: многоточие;

  / * Требуется, чтобы переполнение текста выполнялось * /
  белое пространство: nowrap;
  переполнение: скрыто;
}  

Обратите внимание, что text-overflow возникает только тогда, когда свойство overflow контейнера имеет значение hidden , scroll или auto и white-space: nowrap; .

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

Следующая демонстрация показывает поведение свойства text-overflow , включая все возможные значения. Поддержка браузеров различается!

  Оцените эту ручку! 

Настройка переполнение - scroll или auto будет отображать полосы прокрутки для отображения дополнительного текста, а hidden - нет.Скрытый текст можно выбрать, выбрав многоточие.

Старые вещи

Старая версия спецификации говорит, что вы можете использовать URL-адрес изображения для многоточия, но похоже, что это было отброшено.

Имеется двухзначный синтаксис, например переполнение текста: многоточие с многоточием; , который будет контролировать переполнение с левой и правой сторон одного и того же контейнера. Я не знаю, как этого можно достичь. Возможно, центрированный текст в слишком маленьком контейнере? В новой спецификации говорится, что это, как и определение строки, «подвержено риску».”

Я не знаю, откуда взялось слова с многоточием . Этого нет в спецификации или какой-либо другой документации, кроме WebPlatform.org.

Свойство text-overflow раньше было сокращением для комбинации text-overflow-mode и text-overflow-ellipsis , но больше не существует, и эти отдельные свойства не существуют.

Сопутствующие объекты

Другие ресурсы

Поддержка браузера

Хром Safari Firefox Opera IE Android iOS
25+ 5.1+ 19+ 12.1+ IE8 + 2.1+ 3.2+

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 .

Осталось три оставшихся значения пустого пространства, которые легко понять, сравнив нормальный и nowrap .

до

Pre сохраняет пробелы, разрывы строк и табуляции, но не переносит текст. Другими словами, до точно следует исходному HTML. По определению, до больше всего напоминает полную противоположность нормальному (представьте себя человеком типа до ? Что угодно, но не нормальный ? Узаконивайте себя физическим пониманием нашего странного мира).Это заставляет элемент вести себя как тег

 в HTML.  Pre  заставляет появиться разрывы строк и пробелы, свернутые с помощью  nowrap : 

На этот раз, выше и ниже текста, обратите внимание на интервал, как в нашем исходном HTML. И, как я упоминал ранее, иногда вы хотите сохранить кодировку кода; это особенно полезно для обучения. Кроме того, код и так достаточно мягкий (без обид), так что небольшое форматирование не повредит; здесь и там красивая, красочная граница…

Предварительная упаковка

Если вам нравится все в до , за исключением того факта, что он не переносит текст (на самом деле, он добавляет разрывы строк, как вы увидите ниже), pre-wrap - мой подарок вам.Ограничьте до своим элементом:

Pre-Line

Не можете выбрать одно из вышеперечисленных значений? Возьмите образец каждого с перед строкой . Это сохраняет разрывы строк, такие как до и до переноса , сворачивает пробелы и табуляции, такие как nowrap и normal , и переносит текст, как normal и pre-wrap . Это сложный способ сказать, что pre-line - это pre-wrap без сохранения пробелов и табуляций.Посмотрите:

Сначала может быть трудно вспомнить, какое значение что делает, поэтому для удобства обратитесь к этой таблице для быстрого обзора различного поведения значений белого пространства:

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

Последнее обновление страницы: январь 2014 г.

Рекомендуемые статьи

Развитие

Питер Зоммерхофф

Развитие

Кася Миколук

Как управлять переносом текста? - Веб-учебники


Как управлять переносом текста?

Автор: Дерон Эрикссон

Описание. В этом руководстве по CSS описывается, как использовать свойство white-space для управления переносом текста.

Учебник создан с использованием: Windows XP


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

Если для белого пространства установлено значение «нормальный», текст в элементе переносится нормально, а пробел сокращается. Когда для white-space установлено значение «nowrap», пробелы обычно сжимаются, но текст не переносится, так как разрывы строк подавляются.Когда white-space установлен на 'pre', white-space не сворачивается, и строки прерываются только при разрывах строк в исходном коде.

На странице style-test.html демонстрируется свойство white-space, для которого установлено значение normal, nowrap и pre в трех ячейках таблицы, а затем в трех элементах div.

style-test.html




 Тест стиля 





<таблица>
 'white-space: normal' в первой ячейке 

 Бла-бла-бла
мля 
 Бла-бла-бла-бла 


<таблица>
 'white-space: nowrap' в первой ячейке 

 Бла-бла-бла
мля 
 Бла-бла-бла-бла 


<таблица>
 'white-space: pre' в первой ячейке 

 Бла-бла-бла
мля 
 Бла-бла-бла-бла 



Здесь у нас есть текст, который будет обернут (пробел: нормальный)
Здесь у нас есть текст, который не переносится (white-space: nowrap)
Вот несколько текст, который будет переноситься только в переводы строки (пробел: pre)

Здесь мы видим снимок экрана style-test.html отображается в IE7. Обратите внимание на то, что во второй таблице раскрывается первая ячейка, поскольку ее значение пустого пространства равно «nowrap». В третьей таблице обратите внимание на то, как первая ячейка оборачивается после третьей «бла», поскольку именно здесь у нас есть перевод строки в нашем исходном коде. Еще одна интересная вещь, на которую стоит обратить внимание, - это пробел в третьем элементе div. Обратите внимание, что пробелы между «Здесь» и «мы» не были сжаты, так как значение пробела для третьего элемента div равно «pre».


пробелов - попутный ветер 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, репретендерит саепе квам жидкий одио аккусамус.

  
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, репретендерит саепе квам жидкий одио аккусамус.

Lorem ipsum dolor sit amet, conctetur adipisicing elit.Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, репретендерит саепе квам жидкий одио аккусамус.

  
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure, eum natus enim maxime laudantium quibusdam illo nihil, submithenderit saepe quam aliquid odio accusamus.

Responsive

Чтобы управлять свойством пробела элемента только в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите пробелов.Например, добавление класса md: whitespace-pre к элементу приведет к применению утилиты whitespace-pre при средних размерах экрана и выше.

  

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

Настройка

Варианты

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

Вы можете контролировать, какие варианты генерируются для служебных программ пробелов, изменив свойство пробелов в разделе вариантов вашего попутного ветра .config.js файл.

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ пробел: ['hover', 'focus'],
      }
    }
  }  

Если вы не планируете использовать утилиты пробелов в своем проекте, вы можете полностью отключить их, установив для свойства whitespace значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ пробел: ложь,
    }
  }  

Исправить перекрытие текста с помощью пробелов CSS

Иногда nowrap полезен, когда вы не хотите, чтобы текст разрывался в неудобном месте 🔗

Однако nowrap может иногда приводить к перекрытию текста. Вы можете легко исправить это, установив пробел как нормальный 👍

Некоторый сверхдлинный текст

Некоторый текст

Некоторый очень длинный текст

Некоторый текст

Почему текст перекрывается?

Давайте углубимся в вопрос, почему происходит перекрытие текста.

Некоторый сверхдлинный текст

Некоторый текст

Несмотря на то, что у нас есть nowrap , перекрытия нет. Большой! Но давайте посмотрим, что произойдет, мы установили фиксированную ширину для наших боксов.

Очень длинный текст

Немного текста

О, нет 😱 Перекрытие на нас! Это происходит потому, что по умолчанию ширина : авто . Это означает, что поля будут расширяться в зависимости от его содержимого. Однако, когда мы устанавливаем фиксированную ширину, мы ограничиваем ее рост.И некуда идти, текст выходит за пределы своего родственного поля 🤭

Решение проблемы перекрытия текста

Мы можем легко исправить это, изменив пробел на нормальный .

Некоторый очень длинный текст

Немного текста

Конечно, вы также можете исправить это, удалив фиксированную ширину (например, width: auto ), если вы не возражаете против расширения поля. Как лучше? Что ж, все зависит от пользовательского интерфейса, который вы хотите разработать 🙂

Пример использования

nowrap

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

Преимущество

nowrap для отображения кода

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

белое пространство: нормальное

значение && Object.keys (значение) .length === 0 && value.constructor === Объект;
белое пространство: nowrap

Object.keys (значение) .length === 0 && value.constructor === Object;

Преимущество

nowrap для ссылок

Иногда, когда вы создаете «Узнать больше» или «Узнать больше», вы можете добавить курсор «» »или« ›».И вы хотите, чтобы эти тексты были вместе, потому что их разделение может привести к неудобному результату.

white-space: normal
white-space: nowrap

CSS white-space

Есть другие значения, которые вы можете установить с помощью white-space :

Я планирую охватить каждое из них в большой подробности в будущем лакомом кусочке кода. Между тем, если вы хотите начать работу, ознакомьтесь с документами MDN: white-space 👍

Assume Positive Intent при работе с существующей базой кода

Итак, я заметил, что white-space: normal является значением по умолчанию.Это означает, что такого перекрытия никогда бы не произошло, если бы мы не реализовали white-space: nowrap . Это означает, что кто-то действительно ввел этот стиль в нашу кодовую базу 😳 Прежде чем вы получите ...

Когда вы работаете с существующей кодовой базой, мы часто сталкиваемся с кодом, который не имеет смысла. Но прежде чем переходить к git blame 😅, давайте предположим положительное намерение. Как разработчики, мы всегда стараемся планировать крайние случаи. Но часто мы ничего не узнаем, пока не запустим код и не позволим нашим пользователям начать его использовать.Очень сложно на 100% понять весь объем нашей реализации. Мы делаем все возможное, но можем упустить несколько моментов. Откровенно говоря, поэтому у разработчиков все еще есть работа. В большинстве случаев мы исправляем ошибки 🐞

Мы не должны бояться вносить изменения. Фактически, так мы прогрессируем и становимся лучше. Во время наших попыток улучшить ситуацию мы будем делать ошибки. Когда это произойдет, не крутите колеса, пытаясь обвинить вас, и не спешите с отрицательными суждениями. Мы должны проявить сочувствие к тому, что мы все пошли с наилучшими намерениями.Важно то, что нам нужно учиться на своих ошибках, быстро их исправлять и продолжать двигаться вперед 💪

@KyleDaltonSmith: text-overflow: многоточие также может помочь в правильной ситуации.