Верстка HTML и CSS

Question

Верстка HTML и CSS

GlebKodrik Ученик (36), открыт 5 часов назад

Всем привет, не получается сделать верстку.

Мне нужно, чтобы было как на 1 картинке или как на первом элементе в песочнице. То есть если текст переполняется появлялось троиточие. Если посмотреть на второй элемент в песочнице то контент улетает. Не должно быть привязки к конкретным размерам. Я пытался поработать с overflow и ellipse, но срабатывала только на первую строчку.

Песочница: https://codepen.io/Kodrik/pen/MYgoYeP

Answer 1

Дай мне денег на пиво Просветленный (30116) 5 часов назад

Так ты юзаешь 1 класс для обоих. Что в первом случае ты указал высоту под текст а во втором случае текста больше, высота та же. Либо убирай высоту и пусть авто либо разные классы используй и указывай для каждого блока свою высоту

Дай мне денег на пивоПросветленный (30116) 5 часов назад

Конечно можешь overflow scroll юзать, но как то такое

GlebKodrikУченик (36) 5 часов назад

я просто в первом случае пример показал как я хочу видеть. Во втором случае мне нужно так сделать. С ограниченной высотой карточки

Дай мне денег на пиво Просветленный (30116) Ну

 overflow: scroll;

Твой друг тогда. Ну либо уменьшай текст иначе не знаю

Answer 2

Ограничить бокс нужным количеством строк:

 .wrapper { 
  display: flex; 
  gap: 60px; 
} 
 
.card { 
  background: gray; 
  border-radius: 16px; 
  box-sizing: border-box; 
  display: flex; 
  flex-direction: column; 
  height: 320px; 
  padding: 24px; 
  width: 500px; 
} 
 
.info { 
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 12; /* Ограничивает текст количеством строк */ 
  overflow: hidden; 
} 
 
button { 
  background: #fff; 
  border: none; 
  border-radius: 16px; 
  padding: 12px 24px; 
  cursor: pointer; 
}