Комментарии 7
Пример с background-clip оч красивый, но не работает в FF, пока не попытаешься выделить текст мышкой.
Свойство text-overflow со значением ellipsis позволяет добавлять… в конец текста при его выходе за пределы контейнера.
Стоит добавить, что text-overflow: ellipsis
работает для однострочного текста в сочетании с overflow: hidden
и white-space: nowrap
и для многострочного — при использовании старого синтаксиса flexbox да ещё с префиксом -webkit
и явным указанием количества строк:
display: -webkit-box;
-webkit-line-clamp: <число строк>;
-webkit-box-orient: vertical;
Как-то всё в одну кучу. Если есть желание сделать обзор или мануал, лучше взять какой-то один аспект и его глубоко рассмотреть, например (первое что пришло в голову), способы адаптивного размещения текста с помощью колонок, text-overflow и прочих хитростей. Будет гораздо полезнее, и есть смысл такое добавлять в закладки. А сейчас… Я например не знала про ::marker, но я не стану ради этого сохранять ссылку статью, и точно также забуду.
Сейчас статья — это случайный сборник "вчера я узнал".
Пока свойство не поддерживается 90-99% клиентов, то не стоит их использовать. Некоторые же вроде filter очень тяжёлые и могут приводить к тормозам вплоть до зависания браузера.
Т.е. всегда стоит упоминать ОБЕ стороны всех этих рюшечек, красота vs загрузка процессора.
Классика жанра — filter плюс тени в нескольких комбинациях, гарантированное томрожение браузера на каком-нибудь айпаде чуть старше 2018 г.
Трюки CSS, которые сделают из вас ниндзя верстки