Как зарабатывать больше и получать удовольствие от работы?
Вебинар

"Препятствие переносу текста на новую строку без CSS3"

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы текст оставался в пределах одной строки, используйте свойство CSS white-space: nowrap;:

CSS
Скопировать код
.hang-tight {
  white-space: nowrap; /* Размещаем весь текст в одной строке */
}

Теперь примените этот класс к элементу в вашей HTML-структуре:

HTML
Скопировать код
<div class="hang-tight">Текст не перенесётся на новую строку, сколь угодно много символов он бы ни содержал. Он "упрётся" в край!</div>

Такой CSS стиль обеспечит, что текст сохранится внутри элемента div без переноса на новые строки.

Кинга Идем в IT: пошаговый план для смены профессии

Профессиональные советы и альтернативы

Управление переполнением и блочное отображение

Если текст выходит за пределы своего контейнера, используйте overflow: hidden; или text-overflow: ellipsis;, чтобы скрыть его или заменить выходящую за пределы часть на многоточие:

CSS
Скопировать код
.hang-tight {
  white-space: nowrap;
  overflow: hidden; /* Скрываем текст, выходящий за границы */
  text-overflow: ellipsis; /* При переполнении добавляем многоточие */
}

С такими стилями блочные элементы будут "удерживать" текст в границах, удалённых пределов для таблиц сложнее – такие ячейки по умолчанию имеют display: table-cell;. Рекомендуется обернуть их в <div> со стилем display: block; для более надёжного контроля содержимого.

Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Правила для всех элементов

Убедитесь, что ваши стили работают везде, включая элементы с особенным поведением, например, <h3>:

HTML
Скопировать код
<h3 class="hang-tight">Заголовок тоже может быть оформлен в одну строку!</h3>

Совместимость с браузерами

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

Адаптивный дизайн

В адаптивном дизайне иногда необходимо применять max-height вместе с line-height, чтобы избегать нежелательных переносов текста:

CSS
Скопировать код
.grid-height {
  line-height: 20px;
  max-height: 20px; /* Устанавливаем чёткую высоту строки */
  overflow: hidden;
}

Альтернативы свойству nowrap

Ещё один способ избежать переноса слов – использование неразрывных пробелов &nbsp;. Однако они могут ухудшить читаемость и усложнить поддержку кода. Поэтому подбирайте решение в зависимости от контекста.

Визуализация

Воспринимайте слова как грузовые ящики (📦).

Обычный текст: 📦📦📦📦📦📦📦 📦📦📦📦📦📦📦

Текст с применением white-space: nowrap;: 📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦📦

Теперь текст не разбросан – CSS white-space: nowrap; выстраивает все слова в одну линию.

Работа с длинным контентом

Для длинных URL-адресов и слов используйте word-wrap: break-word; или overflow-wrap: break-word;, чтобы предупредить их нежелательное поведение.

CSS и работа со временем: будущее и прошлое

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

Оптимизация производительности

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

Полезные материалы

  1. Свойство CSS text-overflow
  2. white-space – CSS: каскадные таблицы стилей | MDN
  3. Управление длинными словами и URL в CSS | CSS-Tricks
  4. overflow-wrap в CSS | MDN
  5. Обрезка текста с многоточием в CSS | CSS-Tricks
  6. line-clamp в CSS | CSS-Tricks
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой CSS стиль нужно использовать, чтобы текст не переносился на новую строку?
1 / 5