Свойство text-overflow: многоточие
Как показать многоточие у однострочного текста и когда лучше разрешить перенос.
Как это работает
text-overflow определяет маркер для обрезанного строчного содержимого. Само по себе свойство не ограничивает ширину и не создаёт переполнение. Для распространённого однострочного случая нужны ограниченный размер, overflow и white-space: nowrap.
Многоточие полезно для второстепенного имени в компактной строке. Основной заголовок или важное условие чаще лучше перенести на несколько строк. Читателю должен быть доступен полный текст без необходимости угадывать обрезанную часть.
Пример в интерфейсе
.filename { width: 240px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 12px; background: #eaf4ee; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| ellipsis | Многоточие в месте обрезки. |
| clip | Обрезка без маркера. |
| white-space: nowrap | Запрет обычного переноса строк. |
| overflow: hidden | Обрезка выступающей части. |
На что обратить внимание
Не рассчитывайте на один title как универсальный доступ к полному тексту: на сенсорном экране такая подсказка может быть неудобна или недоступна.
Проверьте на практике
Сузьте карточку, затем разрешите white-space: normal. Решите, где многоточие оправдано, а где перенос лучше сохраняет смысл.
Связанные темы: white-space, overflow.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.