Создайте складную карточку, используя HTML, CSS и JS.CSS

Разбираемся в CSS
Anonymous
Создайте складную карточку, используя HTML, CSS и JS.

Сообщение Anonymous »


Я пытаюсь создать складную карточку. У меня есть объект div, содержащий элементы HTML

.element { цвет фона: серый; нижняя граница: 0,7рем; отступ: 1,4рем; радиус границы: 10 пикселей; название разные строки текста....

автор

Хотя заголовок и автор состоят всего из одной строки текста, текст внутри элементов в принципе может состоять из нескольких строк.

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

Изображение
Первая карточка должна выглядеть так же, как вторая, и при нажатии раскрываться, чтобы отображать полный текст.
Я пытался решить эту проблему, установив свойство max-height в css, а затем изменив его в скрипте js при нажатии на карточке, но таким образом всегда отображается полный текст, а скрипт регулирует только высоту карточек.
У меня была идея разделить
на два элемента, что-то вроде
...

...

а затем измените свойство отображения remaining_text в сценарии js, но это кажется неправильным, если у меня есть много карточек для отображения таким образом.

Вернуться в «CSS»