Wie zeige ich den Inhalt mehrzeiliger Datenattribute mit neuen Zeilen mithilfe von CSS an?

Manipulation von Datenattributen und Pseudoelementinhalten mit neuen Zeilen

In CSS ist es möglich, Werte aus Datenattributen mithilfe der Funktion attr() abzurufen und als anzuzeigen Inhalte unter Verwendung von Pseudoelementen. Das Einfügen neuer Zeilen in diese Datenattribute kann jedoch eine Herausforderung sein.

Problem: Neues Zeilenzeichen im Datenattribut

Betrachten Sie das folgende Codebeispiel:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

<div data-foo="First line \a Second Line">foo</div>

Trotz der Verwendung der Escape-Sequenz „a“, die in CSS ein neues Zeilenzeichen darstellt, bleibt der Inhalt innerhalb des data-foo-Attributs auf einem Single Zeile.

Lösung: Verbesserte Datenattributsyntax und Leerraumkonfiguration

Um mehrzeilige Datenattribute zu aktivieren, ändern Sie die Syntax wie folgt:

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

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

In diese modifizierte Version:

• white-space: pre;: Behält die Leerzeichen innerhalb des Datenattributs bei, einschließlich new Zeilen.
• display: inline-block;: Verhindert Textumbrüche und ermöglicht den Inhalt über mehrere Zeilen zu fließen.
• : HTML-Entität für einen Zeilenumbruch.

Das obige ist der detaillierte Inhalt vonWie zeige ich den Inhalt mehrzeiliger Datenattribute mit neuen Zeilen mithilfe von CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!