Я пытаюсь создать складную карточку. У меня есть объект div, содержащий элементы HTML
.element { цвет фона: серый; нижняя граница: 0,7рем; отступ: 1,4рем; радиус границы: 10 пикселей; название разные строки текста....
автор
Хотя заголовок и автор состоят всего из одной строки текста, текст внутри элементов в принципе может состоять из нескольких строк.
Я хотел бы получить карточку, которая содержит только первую строку текста внутри
, и когда я нажимаю на нее, она расширяется и раскрыть остальной текст. Очевидно, что если текст короткий и для его отображения достаточно одной строки, то клик ничего не даст.

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