Nowrap html – HTML атрибут nowrap | назначение, значения, примеры

Leave a Comment / Html / By /

Атрибут 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>

Атрибут nowrap | HTML | WebReference

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

Данный атрибут устарел, взамен используйте стили.

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

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

Пример

<!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>

Примечание

Чтобы запретить перенос текста в ячейке таблицы используйте стилевое свойство white-space со значением nowrap, добавляя его к селектору td.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nowrap</title>
  <style>
   td {
    border: 1px solid red;
    white-space: nowrap;
   }
  </style>
 </head>
 <body> 
  <table>
   <tr>
    <td>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate</td>
   </tr> 
  </table>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.01.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

Синтаксис

<th nowrap>...</th>

Значения

Нет.

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

По умолчанию атрибут 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>Тег TH, атрибут nowrap</title>
 </head>
 <body>

  <table>
   <tr>
    <th nowrap>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
     nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
     volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
     ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
     Duis te feugifacilisi.</th>
   </tr> 
   <tr>
    <td>Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en 
     commodo consequat.</td>
   </tr> 
  </table> 

 </body>
</html>

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

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

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

Атрибут nowrap | HTML | WebReference

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

Данный атрибут устарел, взамен используйте стили.

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

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

Пример

<!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>TH, атрибут nowrap</title>
 </head>
 <body>

  <table>
   <tr>
    <th nowrap>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
     nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
     volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
     ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
     Duis te feugifacilisi.</th>
   </tr> 
   <tr>
    <td>Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en 
     commodo consequat.</td>
   </tr> 
  </table> 

 </body>
</html>

Примечание

Чтобы запретить перенос текста в ячейке таблицы используйте стилевое свойство white-space со значением nowrap, добавляя его к селектору th.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nowrap</title>
  <style>
   th {
    border: 1px solid red;
    white-space: nowrap;
   }
  </style>
 </head>
 <body> 
  <table>
   <tr>
    <th>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate</th>
   </tr> 
  </table>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.01.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

seodon.ru | Теги HTML — Тег TD

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут nowrap, тега <TD>, применятся для запрета переноса строк внутри ячейки. Дело в том, что браузеры автоматически осуществляют перенос строки, если она не умещается в ширину ячейки, а при помощи атрибута nowrap можно сделать так, чтобы содержимое ячейки располагалось в одну строку. Исключением являются блочные теги в ячейке, так как они всегда отображаются с новой строки, но их содержимое также будет идти одной строкой. Данный атрибут играет роль булевой переменной.

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

Булева переменная — это переменная, которая может иметь всего два значения: true или false (истина или ложь). В нашем случае присутствие nowrap является истиной (все в одну строку), а его отсутствие — ложью (строки переносятся).

Значения

Атрибут сам играет роль значения.

Значение по умолчанию: Если nowrap отсутствует, то строки внутри ячеек переносятся автоматически.

Синтаксис

<td nowrap>...</td>

Обязательный атрибут: нет.

Пример HTML: применение атрибута nowrap

<!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>seodon.ru - Тег TD, атрибут nowrap</title>
 </head>
 <body>
  <table border="1">
   <tr><td nowrap>Одной из ошибок начинающих создателей сайтов является построение
      макета для сайта, который отображается без горизонтального скроллинга
      только при больших разрешениях экрана. Это неверно, ведь посетители
      сайтов используют мониторы с разными разрешениями, но при этом прокручивать
      страницу влево-вправо, чтобы увидеть информацию, никто не любит.</td></tr>
  </table>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ЧастичноНетЧастичноНет

В HTML 4.01 и XHTML 1.0 использовать атрибут nowrap допускается только с <!DOCTYPE> Transitional и Frameset, в противном случае будет невалидный код. А вообще, рекомендуется применять стили (CSS).

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

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

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