Почему не работают падинги?

Question

[Mark321]

Есть див, там много текста, и он прилипает к низу дива, падинги игнорируются
как это исправить, подскажите пожалуйста

.div {
  max-height: 112px;
  width: 800px;
  background-color: #000;
  color: #fff;
  padding: 20px;
  font-size: 16px;
  line-height: 1.2;
}

Comments

[Ankhena]

А куда должен деваться текст, который не поместился в ваши 112px?

как это исправить, подскажите пожалуйста

Убрать ограничение по высоте.

[Mark321]

Ankhena, обрезаться, но с учетом падингов

[Ankhena]

Mark321, чтобы обрезался, нужно использовать overflow: hidden.
Чтобы остались отступы, нужна доп обертка или имитация отступов с помощью, например, бордеров.

[Mark321]

Ankhena, Обертка сработала, спасибо за помощь, а каким образом можно добиться эффекта, что бы пользователь понимал, что текст обрезан и есть продолжение

[Николай Угольников]

Mark321, text-overflow: ellipsis

[Ankhena]

Mark321, обычно ставят многотичие с помощью text-overflow ellipsis или js'ом или прилетает с бэка.
Хорошо бы ещё пользователю намекнуть, что нужно сделать, чтобы увидеть остальной текст.
Причем, не забыть пользователей без мышки и читалки.

[Mark321]

Ankhena, он же используется только со свойством no-wrap, которая строку запрещает переносить, из-за этого верстка не адаптивная становится

[Mark321]

Николай Угольников, он же используется только со свойством no-wrap, которая строку запрещает переносить, из-за этого верстка не адаптивная становится

[Ankhena]

Mark321,
Это у вас блок малоадаптивный. Ширина фиксирована, высота ограничена. Сделаете сам блок адаптивным, будет хорошо.

Размер текста определяется блоком.
Количество строк да, указываете вы.
Но можно макс высоту указывать в em с учетом line-height, чтобы ровненько всё было.

Answer 1

[Антон Романков]

Дело в свойстве max-height, которое ограничивает высоту. Паддинги остаются, но они вне "вьюпорта" этого блока. Попробуйте добавить overflow: auto и проскроллить до конца. Вы найдете ваших потеряшек :-)