Wie kann ich mithilfe von Datenattributen in CSS Zeilenumbrüche zu Pseudoelementinhalten hinzufügen?

Zuweisen neuer Zeilenzeichen zu Datenattributen in CSS und Pseudoelementinhalten

Diese Abfrage untersucht die Möglichkeit, neue Zeilenzeichen in CSS zu integrieren Datenattribute. Der Benutzer möchte mehrzeilige Inhalte mithilfe der Content-Eigenschaft eines Pseudoelements und des aus dem Datenattribut extrahierten Werts anzeigen.

Implementierung

Der anfängliche Ansatz, Die Verwendung von „a“ als Zeilenumbruchzeichen innerhalb des Datenattributs erwies sich als erfolglos. Um das gewünschte Ergebnis zu erzielen, sind folgende Änderungen erforderlich:

Änderung des Datenattributs:

• Ersetzen Sie „a“ durch „ "; diese HTML-Entität entspricht einem Zeilenumbruchzeichen.

CSS-Änderungen:

• Inhalt: attr(data-foo) ;: Behalten Sie die ursprüngliche Funktionalität der Anzeige der Datenattribute bei Inhalt.
• Hintergrundfarbe: schwarz; Leerraum: vor; Anzeige: inline-block;: Stellen Sie sicher, dass der Inhalt seine Formatierung beibehält und als diskreter Block angezeigt wird.

Finale Code:

CSS:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

HTML:

<div data-foo='First line &amp;#xa; Second Line'>foo</div>

Diese Modifikation ermöglicht das Pseudonym -Element zum Anzeigen des mehrzeiligen Inhalts unter Beibehaltung der im Datenattribut definierten Zeilenumbrüche.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von Datenattributen in CSS Zeilenumbrüche zu Pseudoelementinhalten hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!