Коротко: «убрать перенос строки» в CSS — значит управлять тем, как текст переносится. Запрет переноса — white-space: nowrap; обрезка с троеточием — text-overflow: ellipsis; управляемый перенос длинных слов — overflow-wrap: break-word. Если переносы «лишние», ищите теги <br> и жёсткие width в разметке.
Как убрать перенос строки в CSS
📅
⏱ 21:18
⏳ 1 мин
💬 0
Как убрать перенос строки в css: простыми словами, по шагам и с примерами. Разбираем, как это работает на практике, типичные ошибки и лучшие решения. Раскрываем
Кому и зачемПроблемы бывают двух видов: текст переносится там, где не должен (кнопки, заголовки), или не переносится, где должен (длинные слова вылезают за блок). Способы разные.
Что нужно сделать
| Цель | Свойство |
|---|---|
| Запретить перенос | white-space: nowrap |
| Обрезать с «…» | text-overflow: ellipsis |
| Переносить длинные слова | overflow-wrap: anywhere |
| Разрешить переносы по дефису | hyphens: auto |
| Убрать «ручные» переносы | удалить <br> в разметке |
Вкладки: примеры
CSS
.btn {
white-space: nowrap; /* текст кнопки не переносится */
}Удобно для кнопок, меню и бейджей. Минус: при узком контейнере текст может вылезти за границы — следите за шириной.
CSS
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Три свойства вместе: длинный заголовок обрежется и закончится «…». Классика для заголовков карточек. Для многострочного варианта нужен другой приём (например, -webkit-line-clamp).
CSS
.text {
overflow-wrap: anywhere; /* длинные слова переносятся */
word-break: break-word;
}Помогает, когда в текст попал длинный URL или слово без пробелов. Обычный перенос по пробелам при этом остаётся.
CSS
.text {
hyphens: auto;
/* нужен атрибут lang у элемента */
}Плавные переносы по слогам. Требуют указания языка (lang="ru"), иначе работать не будут.
Если мешает «жёсткий» переносЧасто в текст вставлены теги
<br> из редактора — CSS их не уберёт. Удалите их в контенте или замените на пробелы. Помните: правка через CSS br { display: none } — плохая практика, она ломает смысл переноса.Практика: три типовые задачи
- Кнопка не должна «ломаться» на две строки —
white-space: nowrap. - Заголовок карточки в одну строку с «…» — набор из трёх свойств.
- Длинное слово вылезает из блока —
overflow-wrap: anywhere.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| text-overflow не работает | нет overflow: hidden |
добавить |
| Текст выходит за блок | длинное слово | overflow-wrap |
| Переносы по-прежнему есть | теги <br> в контенте |
убрать в редакторе |
| Перенос по слогам не работает | нет языка | добавить lang |
Проверьте себя
Чек-лист
Какое свойство запрещает перенос строк?
Что обязательно вместе с
text-overflow: ellipsis?
Вопросы и ответы
Через display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; — поддерживается во всех актуальных браузерах.
У flex-элементов минимальный размер равен содержимому. Добавьте min-width: 0 у элемента и overflow-wrap: anywhere.
У ячеек — white-space: nowrap;. Учтите, что таблица может стать шире — понадобится горизонтальная прокрутка контейнера.
Да: символ неразрывного пробела или тег <wbr> (место возможного переноса). Но это уже разметка, а не CSS.
Итоги
- Запрет переноса —
white-space: nowrap. - Обрезка с «…» — набор из nowrap, overflow и ellipsis.
- Длинные слова —
overflow-wrapиmin-width: 0во flex. - Ручные
<br>из контента убирают в редакторе.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.