Совместное использование Flexbox и текстового многоточия

Совместное использование Flexbox и текстового многоточия

От автора: как-то меня попросили создать таблицу, содержащую список файлов, загруженных пользователями. Представьте себе таблицу, похожую на список файлов в Finder.

Примерно такой список:

Совместное использование Flexbox и текстового многоточия

Второй элемент таблицы mobile-phone-screenshot-long-fine-name.png, однако столбец не достаточно большой, чтобы показать полное имя файла. Вместо этого мы видим mobile-phone-sc…g-fine-name.png. В этом проекте мы решили вырезать часть конца имени файла и сохранить расширение, как показано выше:

Совместное использование Flexbox и текстового многоточия

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

HTML-разметка:

И CSS:

Эффект многоточия может быть создан путем объединения свойств 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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Flexbox

Изучите работу с Flexbox

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.