Создайте складную карточку, используя 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, но это кажется неправильным, если у меня есть много карточек для отображения таким образом.
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

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