Обычно на айфоне если у вас родитель расположен на весь экран, а дочерний элемент использует position: absolute; bottom: 0;, когда видна нижняя панель браузера, дочерний элемент не виден. Что бы это исправить задайте следующий стиль родителю, абсолютно позициированного элемента:
padding-bottom: env(safe-area-inset-bottom);
Для ограничения кол-ва строк в CSS достаточно использовать следующую конструкцию, и никаких костылей не нужно!
на главную
overflow: hidden;
text-overflow: ellipsis;
display: -moz-box;
-moz-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
box-orient: vertical;После применения данного кода блок будет ограничен 2 строками, а далее будет стоять троеточие.
Бывает вы хотите чтобы список выводился в несколько колонок. Для этого обычно используется ul li со стилем column-count: 3;
Но появляется проблема, что последняя строчка становится первой во втором столбике либо наоборот
ЕСТЬ РЕШЕНИЕ! Добавьте к стилям li следующее
break-inside: avoid-column;Под катом вы увидите код, который мог быть взят из кода Bootstrap для добавления верстки таблиц в свою сетку.