Как убрать перенос строки в css

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

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

Как отменить перенос флекс-элементов на следующую строку?

Как отменить перенос флекс-элемента на другую строчку, чтобы он смотрелся на 768px вот так

у меня получается вот, хотя на чуть большем разрешении все нормально, но доходя до 768 переносится

• Вопрос задан более двух лет назад
• 350 просмотров

Комментировать

Решения вопроса 1

Наполни смыслом каждое мгновенье