CSS Overflow: Отображаем одну строку текста без переноса

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

Если вам нужно оформить в CSS однострочный текст, где излишки скрываются и заменяются на многоточие, используйте следующие стили:

.single-line-text {
  white-space: nowrap; /* Без переносов */
  overflow: hidden; /* Скрываем лишнее */
  text-overflow: ellipsis; /* Добавляем многоточие */
  width: 100%; /* Растягиваем на всю доступную ширину */
}

<div class="single-line-text">Здесь длинный текст, который отобразится в строку.</div>

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

Ближе к ядру: ключевые вещи в CSS

Отображение текста в одну строку

white-space: nowrap; держит текст внутри одной строки, не перенося его. Применяйте это свойство для сохранения цельности текста даже тогда, когда его длина превышает ширину контейнера.

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

Управление переполнением: как скрыть текст

overflow: hidden; скрывает текст, выходящий за размеры элемента, делая его невидимым. Оценивайте влияние такой установки на восприятие пользователем в зависимости от контекста.

Ширина по границам контейнера

Свойство width: 100%; гарантирует, что ширина текста подстраивается под родительский элемент и адаптивно меняется при изменении его размеров.

Совет: ширину можно задавать в пикселях, чтобы добиться конкретного результата в дизайне!

Явное указание на скрытый текст

Свойство text-overflow: ellipsis; добавляет многоточие, давая сигнал о наличии скрытого текста и поддерживает интерес к нему.

Анализ поведения overflow в различных контекстах

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

Чтобы обеспечить однострочное отображение текста с многоточием в сложных условиях, можно предпринять следующие шаги:

• Адаптивная ширина: Регулируйте ширину текста с помощью медиа-запросов для учета различных устройств.
• Динамический контент: Используйте JavaScript для управления размерами содержимого по мере его изменения.
• Обрезка текста: Используйте text-overflow: clip; для прямого обрезания текста без многоточия.
• Особенности Firefox: Убедитесь, что text-overflow корректно обрабатывается в браузере Firefox и попробуйте -webkit-line-clamp в браузерах на основе Webkit. Степень поддержки может варьироваться.

Стилизация и расположение текстового блока

Продумайте оформление и размещение контейнера с текстом на странице:

• Фиксированная высота: Задайте высоту контейнера равной line-height или размеру текста.
• Floats и Padding: Используйте соответствующие свойства и отступы для должной компоновки элементов.

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

Можно сравнить переполненный текст с очередью людей, ждущих входа на концерт:

Очередь:       [🚪]
Люди:          "👯‍♂️👯‍♀️👯👯‍♂️"

.css-queue {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Итог применения CSS: [🚪👯‍♂️...]
                – Только одна пара уже наслаждается музыкой!

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

Когда CSS не достаточно

Включение JavaScript для дополнительного контроля

Если вам требуется больше функционала, чем может предложить CSS, JavaScript может измерить ширину содержимого и динамически применить подходящие стили.

Отзывчивость и интерактивность

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

Полезные ссылки

1. text-overflow – CSS: Каскадные таблицы стилей | MDN — Развернутое руководство по свойству text-overflow.
2. Обрезание строки с многоточием | CSS-Tricks — Примеры обрезания текста в одну строку с многоточием.
3. Flexbox для обрезания текста | CSS-Tricks — Описание работы с переполнением текста при помощи flexbox.
4. CSS text-overflow в ячейке таблицы? – Stack Overflow — Обсуждения и решения регулирования переполнения в ячейках таблиц.
5. overflow – Справочник CSS — Наглядный справочник, демонстрирующий свойство overflow.
6. Изучаем CSS: Шпаргалка по блочной модели | Codecademy — Руководство по блочной модели в CSS и управлению с overflow.
7. overflow-wrap – CSS: каскадные таблицы стилей | MDN — Инструкция по использованию свойства overflow-wrap.