Zeigt den Inhalt von „“ an, wenn „“ geschlossen ist ⇐ CSS

[Anonymous]

Gibt es eine Möglichkeit, den Inhalt eines -Elements anzuzeigen, auch wenn es reduziert ist?
Ich möchte den Inhalt des -Elements unterschiedlich gestalten, je nachdem, ob es das open-Attribut hat.
Unten finden Sie ein Beispiel für die Art von Dingen, die ich erreichen möchte. Ich möchte, dass der Text abgeschnitten wird, wenn das Element reduziert wird, aber vergrößert wird, um beim Erweitern den gesamten Inhalt anzuzeigen. (Die genaue Implementierung des Ausschneidens von Text und der Erweiterung von Inhalten ist hier irrelevant. Der wichtige Teil besteht einfach darin, das Tag anzuzeigen, wenn reduziert wird.)

Code: Select all

details[open] p {
flex-grow: 1;
}

details:not([open]) p {
display:       inline;
max-height:    3em;
text-overflow: ellipsis;
}

Code: Select all

This is the summary element.
This is the details element.