Справочник · CSS

text-overflow: многоточие у слишком длинной строки

Многоточие появляется только вместе с обрезанием строки. Одного text-overflow мало.

Как это работает

Нужны white-space: nowrap, overflow: hidden и text-overflow: ellipsis. Блок должен иметь ограниченную ширину. Так прячут длинное имя файла или пункт в узкой карточке. Не обрезай абзац урока: лучше перенести строку. Обрезанный текст остаётся в HTML целиком, его можно показать в title, если смысл пропадает.

.filename {
  max-width: 16rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Когда использовать

Однострочное имя в списке файлов или таблице. Основной текст урока переноси.

Частые ошибки

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