Как сделать чтобы текст не переносился html

Как сделать чтобы текст не переносился html

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

Синтаксис

Текст

Закрывающий тег

Атрибуты

Аналог CSS

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

HTML 4.01 IE Cr Op Sa Fx

     
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
 
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.
  

Результат данного примера показан ниже.

Рис. 1. Текст без переносов

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Как запретить перенос текста?

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

В примере 1 white-space применяется к ссылкам, чтобы текст ссылки не «разбивался» и не переносился на другую строку.

Пример 1. Использование white-space

Результат данного примера показан на рис. 1.

Рис. 1. Меню с запретом переноса текста

См. также

• text-overflow
• white-space
• Оформление ссылок

Перенос строки CSS

normal текст переносится | пробелы не учитываются | Enter (разрыв строки) не учитывается pre-line текст переносится | пробелы не учитываются | Enter учитывается pre-wrap текст переносится | пробелы учитываются | Enter учитывается pre текст не переносится | пробелы учитываются | Enter учитывается nowrap текст не переносится | пробелы не учитываются | Enter не учитывается initial normal inherit наследует значение родителя unset наследует значение родителя

ноль один два три Enter пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать

  
ноль один два три Enter пять шесть семь восемь девять десять одиннадцать двенадцать тринадцать четырнадцать

У тега по умолчанию white-space имеет значение pre .

• в комментариях, которые заполняют посетители, далёкие от HTML. Абзацы разбиваются не тегом

  , а перевод строки обозначается не тегом
  , а символом , который печатает клавиша Enter .

• для демонстрации HTML кода.
• для оформления стихов.

Запретить перенос

Значения pre-wrap и pre-line поддерживаются Internet Explorer 8

Запрет переноса с помощью white-space: nowrap;

  Значения pre-wrap и pre-line поддерживаются Internet Explorer 8 

Запрет переноса с помощью неразрывного пробела   и/или неразрывного дефиса ‑

В данном примере они более подходят, так как занимают меньше места. К тому же при использовании overflow-wrap: break-word; или word-wrap: break-word; или word-break: break-all; символы всё же в определённый момент переходят на следующую строчку.

Значения pre‑wrap и pre‑line поддерживаются Internet Explorer 8

Прокрутка при отключении автопереноса

Часто совместно со значениями pre или nowrap элементу меняется значение свойства overflow , чтобы добавить полосу прокрутки или обрезать выходящую за границу часть, дабы не появился горизонтальный скролл у всего сайта.

  overflow: visible; 
Значения pre-wrap и pre-line поддерживаются IE 8
 overflow: hidden; 
Значения pre-wrap и pre-line поддерживаются IE 8
 overflow-x: scroll; 
Значения pre-wrap и pre-line поддерживаются IE 8
 overflow: auto; 
Значения pre-wrap и pre-line поддерживаются IE 8
 

Разрыв строки

Тег

Элементы после тега
будут перенесены на следующую строку с любым значением свойства white‑space .

ноль один

три Enter пять шесть

 div 
ноль один <br> три Enter пять шесть

Блочный элемент

три Enter пять шесть

 #raz 
ноль один <div></div>  три Enter пять шесть

Свойство white-space

 h1 < white-space: pre-line; > span 
Это должно быть сверху это под ним

Разрыв строки в псевдоэлементах ::before / ::after

  
Текст

У моноширинного шрифта все символы одной ширины, в том числе пробел

  
Дельфин из символов

• Перенос слов CSS (свойство word-wrap и др.)
• Красная строка CSS (свойство text-indent )
• Колонки CSS

Как не переносить слова в новую строчку. Как сделать, чтобы тег p или span не переносился?

Иногда нужно, чтобы текст не переносился, то есть чтобы оставался в той же строке или переносился с каким-то словом или картинкой в следующую строку.

Можно сказать — как привязать два слова вместе или картинку и слово.

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

Это достигается использованием тэга span — .

Вот эта картинка (фотография) всегда будем вместе со следующим за ней словом.

Главная | ▲ | Контакты
Copyright © 24GLO LTD ® 2004-2024. All rights reserved.