Как спрятать часть текста на CSS или кнопка“Еще”?

#html #css

Есть блок в котором находится описание товара. Возможно ли сделать с помощью свойств
CSS, если текст больше блока, то часть его скрывается и появляется кнопка, по нажатию
на которую блок с текстом полностью открывается.
Сейчас в голове только вариант с помощью overflow: hidden и js или label, input.
менять высоту блока.
    

Ответы

Ответ 1

Можно вот так сделать



button {outline: none;}
.text {
  display: block;
  width: 300px;
  height: 10px;
  border: 1px solid black;
  padding: 5px;
  margin-top: 5px;
  outline: none;
  overflow: hidden;
}
.text:focus, button:focus ~ .text {height: auto;}

  
  

    Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов,
счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег.
С наступающим!
  



Ответ 2

Если Вы хотите именно кнопку, чтобы на неё кликать, то тут без js не обойтись. На
чистом CSS можно сделать следующее: по умолчанию задать блоку какую-то строгую высоту
и overflow: hidden, а по наведению (hover) менять высоту на auto.



#block {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: hidden;
  padding: 5px 10px;
  font-size: 14px;
}

#block:hover {
  height: auto;
  cursor: pointer;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.