От автора: как-то меня попросили создать таблицу, содержащую список файлов, загруженных пользователями. Представьте себе таблицу, похожую на список файлов в Finder.
Примерно такой список:
Второй элемент таблицы mobile-phone-screenshot-long-fine-name.png, однако столбец не достаточно большой, чтобы показать полное имя файла. Вместо этого мы видим mobile-phone-sc…g-fine-name.png. В этом проекте мы решили вырезать часть конца имени файла и сохранить расширение, как показано выше:
HTML-разметка:
<div class="filename"> <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span> <span class="filename__extension">pdf</span> </div>
И CSS:
.filename { display: flex; min-width: 0;
} .filename__base { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
} .filename__extension { flex-shrink: 0;
}Эффект многоточия может быть создан путем объединения свойств text-overflow, white-space и overflow, однако, мы все еще должны выяснить отношения между базой имени файла и его родителя, который также содержит расширение файла.
Хитрость заключается в использовании свойства min-width, как описано в этом пен AJ Foster и на CSS Tricks. Из спецификации Flexbox:
Примечание. Ключевое слово auto, представляющее автоматический минимальный размер, является новым начальным значением свойств min-width и min-height. Ключевое слово было ранее определено в этой спецификации, но теперь определено в модуле CSS Sizing.
В общем, минимальный размер содержимого флекс-элемент на основе содержимого меньше предлагаемого размера содержимого и указанного размера.
Используя min-width: 0, мы изменяем минимальный размер контейнера flexbox, что изменит размер дочерних элементов контейнера, которые не используют атрибут flex-shrink. Так как для базы имени файла элемент заданы свойства text-overflow, white-space и overflow, многоточие будет выведено должным образом.
Полный пример доступен в этом Codepen.
Автор: Leonardo Faria
Источник: https://leonardofaria.net
Редакция: Команда webformyself.