Дизайн из следующего CSS не выглядит, как ожидалось в Mozilla Firefox

Question

У меня есть CSS, как указано ниже.

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

, но дизайн выше CSS выглядит отлично в Chrome, но в Mozilla Firefox он не появляется четко.Примечание. Приведенный выше код предназначен для скрытия длинного текста и отображения только нескольких строк начала текста.

Answer 1

Поле использования CSS устарело, и следует использовать flex, как показано ниже:

.controlledline4 {

   display: -webkit-flex;
   display: -moz-flex;
  overflow : hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -moz-line-clamp: 3;
  -webkit-flex-direction: column;  
  -moz-flex-direction: column;  
}

Answer 2

Mozilla использует CSS-атрибут -moz .Chrome и Safari используют -webkit .IE9 + используйте -ms .

Измените свой CSS следующим образом:

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

Это должно работать.