Почему не работает свойство text-overflow: ellipsis; в Mozilla?

Question

[Anettc]

Как сделать так, чтобы получить аналог text-overflow: ellipsis; для мультистроки? это свойство, которое добавляет троеточие к строке, если текст в контейнер не влезает.. Нет окончательного решения. есть вариант с -webkit-box и —webkit-line-clamp, но он не работает в Мозилле)

Answer 1

[Даниил Попов]

text-overflow работает в связке со следующими свойствами для inline тегов (span и пр.)

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Пример: https://jsfiddle.net/groog/vo3x7c6w/

Для многострочного этот вариант не подходит, но есть решения на JS
Для ванилы:
https://github.com/glinford/ellipsis.js
https://github.com/josephschmitt/Clamp.js
Для JQ:
https://github.com/jjenzz/jquery.ellipsis

Comments

[Anettc]

я это понимаю, но это свойство text-overflow: ellipsis; не отрабатывает в mozilla
Вот пример кода:
line-height: 1.5em;
height: 3em;
font-size: 20px;
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
Правильно ли я понимаю что это можно сделать только скриптом? И может ли кто-то подсказать как именно сделать?

[Даниил Попов]

Anettc, Добавил пример, взгляните. Будет непонятно - спрашивайте

[Anettc]

Даниил Попов, так он же не отрабатывает в Mozilla...
Вопрос был как раз про этот браузер

[AngReload]

Anettc, работает в огнелисе, у меня как минимум.

[Даниил Попов]

Anettc, аналогично все работает. Может у вас старая версия без поддержки? В этом случае я бессилен.

[Anettc]

Это для одной строки. А нужно чтобы на второй строке к тексту, который не влезает в контейнер, добавлялось многоточие(

[Даниил Попов]

Anettc,
Для многострочного текста только JS
Можете попробовать:
Для ванилы:
https://github.com/glinford/ellipsis.js
https://github.com/josephschmitt/Clamp.js
Для JQ:
https://github.com/jjenzz/jquery.ellipsis

[Иван Доброславин]

Anettc, в Мозилле работает, только что проверил.

Answer 2

[Юрий Бедулин]

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;}

нашел в перевод буржа - проверил, но не в мозиле - работает