5мес

Верстка HTML и CSS

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

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

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

Только авторизированные пользователи могут оставлять свои ответы

Дата

Популярность

z9xsvoipgjphzyl

Искусственный Интеллект

5мес

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

12345678910111213141516171819202122232425262728293031

 .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; 
}