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

Дата публикации: 2020-08-13

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

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

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

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

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

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>

<span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>

</div>

И CSS:

.filename {
  display: flex;
  min-width: 0;
}

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

.filename__extension {
  flex-shrink: 0;
}

.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

Источник: //leonardofaria.net

Редакция: Команда webformyself.

Метки: Flexbox