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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст с применением 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