Не так давно мы на работе обсуждали, как показывать и обрезать разного рода id, файловые пути и названия файлов вообще.
Ведь очень часто получается так, что значащая информация — она в самом начале и самом конце (корневой каталог и название файла), а
text-overflow: ellipsis просто обрезает концовку.Так вот, эта тема на самом деле сейчас весьма в тренде. Многие сталкиваются с похожей задачей и приходят к различным решениям. Не все, правда, делятся. Вот иллюстрацию к посту я взял у пользователя X — azlandotgg. Но кодом он не поделился!
Зато uixmat кодом поделился. Точнее, как, поделился... дал ссылку на чат v0 🙈
И хотя там довольно интересно посмотреть ход мыслей, давайте всё же повторим это в Codepen: https://codepen.io/alinaki/pen/azZPPad?editors=1100
Итак, суть идеи:
1. Дублируем строку в атрибуты контейнера и элемента
2. При помощи контейнерных запросов и RTL-направления текста, просто включаем псевдоэлементы с контентом из атрибутов в нужный момент
3. Ну, собственно, всё :)
Другим вариантом может стать флексбокс на трёх элементах. Но мне было лениво выгребать код из видео разного рода инфлюенсеров, оставлю на потом.
Не знаю, лучше ли это простого подсчёта символов, или нет, но весьма забавно.
#css #truncate #middle #cq