Всем доброго времени суток. Подскажите, пж, можно как-то более корректно

Question

Всем доброго времени суток. Подскажите, пж, можно как-то более корректно

добиться через css, чтобы в элементе как на картинке text-overflow применялся через указанное кол-во строк? Пока что нашёл только такой способ, но как я понял - это всё экспериментальные свойства и юзать их не очень хорошо...

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;

П.с.
Через жс знаю как сделать, хотелось бы обойтись чисто css, либо услышать, что это невозможно. )

#css #frontend #html #programming #russian

0

03.04.2021

12 ответов

4 просмотра

Danila Bakunov

@ark
https://stackoverflow.com/questions/11426275/how-c...

лишь бы ответить

0

03.04.2021

@ark

Danila Bakunov
лишь бы ответить

? Там нет решения?

0

03.04.2021

Дмитро

Почему не очень хорошо?

0

03.04.2021

Danila Bakunov

-webkit-line-clamp имеет поддержку 96.29% все ок

0

03.04.2021

Danila Bakunov

@ark
? Там нет решения?

там решения для однострочного скрытия текста, спрашивалось для N строк

0

03.04.2021

Alexandr Автор вопроса

Danila Bakunov
-webkit-line-clamp имеет поддержку 96.29% все ок

Немного смутили префиксы и малое кол-во инфы об этой фиче. Если так, то продолжу юзать, спасибо!

0

03.04.2021

Danila Bakunov

Alexandr
Немного смутили префиксы и малое кол-во инфы об эт...

проблема только с -webkit-box-orient, в firefox она не поддерживается, и вообще deprecated

0

03.04.2021

Alexandr Автор вопроса

Danila Bakunov
проблема только с -webkit-box-orient, в firefox он...

Блин, тогда я вообще ничего не понял, без этого line-clamp не работает, какая-то странная новая фича получается...

0

03.04.2021

Danila Bakunov

Alexandr
Немного смутили префиксы и малое кол-во инфы об эт...

https://css-tricks.com/line-clampin/ вот посмотри там через высоту строки и псевдоэлементами можно кроссбразуерно решить

0

03.04.2021

Danila Bakunov

Alexandr
Блин, тогда я вообще ничего не понял, без этого li...

в ютубе названия роликов обрезаются кстати через box-orient и line-clamp

0

03.04.2021

Alexandr Автор вопроса

Danila Bakunov
https://css-tricks.com/line-clampin/ вот посмотри ...

Пойду вникать, вроде бы какая-то базовая вещь, а поставила в тупик. Если ещё корректно с flex-shrink будет работать, то вообще огонь. Ещё раз спасибо! )

0

03.04.2021

@ark · Accepted Answer

@ark

https://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-a-span-with-hidden-overflow

0

03.04.2021

169 похожих чатов

Всем доброго времени суток. Подскажите, пж, можно как-то более корректно

12 ответов

Похожие вопросы