Усечение длинного текста в div с CSS: ограничение до 100px

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

Для обрезки текста, превышающего границы элемента div, и замены его на многоточие, можно применить следующие CSS-правила:

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

После этого примените класс truncate к соответствующему блоку div:

<div class="truncate">Это длинная строка текста, которая будет обрезана многоточием в конце...</div>

Спасибо этим стилям, текст, превышающий границы блока, будет обрезан и завершён многоточием, что делает содержимое компактным и понятным.

Анализ компонентов

Для глубокого понимания приведённого выше CSS кода рассмотрим его ключевые компоненты:

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

Углубление в тему

Работа с содержимым переменной длины

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

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

Применение в адаптивном дизайне

При разработке адаптивного дизайна полезно использовать свойство max-width с относительными единицами (например, em или vw), что обеспечит корректное масштабирование на разных устройствах:

.truncate-responsive {
  max-width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Настройка представления содержимого

Управление размерами элемента div можно осуществлять через установку display: inline-block или display: block; и задание конкретной ширины. Установка line-height, соответствующего высоте div, гарантирует, что весь текст будет расположен на одной линии:

.truncate-tuned {
  display: inline-block;
  width: 100%;
  line-height: 1.5em; /* Высота div */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Тестирование и корректировка обрезки

Не забывайте проводить тестирование на разных размерах экранов и устройствах. Важно помнить, что свойство overflow: hidden; может приводить к незначительному обрезанию последних видимых символов.

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

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

.frame {
  width: 200px; /* Размер рамы */
  overflow: hidden; /* Удаление лишнего */
  white-space: nowrap; /* Текст сохраняется на одной линии */
  text-overflow: ellipsis; /* Намек на скрытый текст */
}

В итоге получаем аккуратно оформленный контент:

До обработки:  |🎨 Звездная ночь Винсента Ван Гога, июнь 1889 |
После обработки:  |🖼️ Звездная ночь...                             |

Свойство text-overflow: ellipsis символизирует незавершённость и скрытый контент.

Адаптивное обрезание текста

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

.frame-responsive {
  max-width: 50vw; /* Варьируется с шириной экрана */
  /* Параметры оставлены без изменений */
}

Работа со спецсимволами и различными языками

При работе со специальными символами и текстом на различных языках, следует учесть, что свойство text-overflow: ellipsis; может давать непредсказуемые результаты. Тестирование важно проводить с учётом специфики контента.

Несовместимость с некоторыми браузерами

Некоторые браузеры могут не поддерживать свойство text-overflow, поэтому необходимо проверять совместимость для обеспечения правильного отображения элементов.

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

1. Справочник MDN по свойству text-overflow
2. Свойство overflow-wrap на MDN
3. Использование адаптивного веб-дизайна
4. Дискуссия overflow на Stack Overflow (не путайте с этой темой)
5. Применение многоточия в UX-дизайне
6. Осознание типографики для создания легко читаемых таблиц