Können Datenattribute in CSS neue Zeilenzeichen enthalten?

Umgang mit neuen Zeilenzeichen in CSS-Datenattributen und Pseudoelementinhalten

Frage:

Kann ein Datenattribut in CSS ein Zeilenumbruchzeichen enthalten? Kann dies konkret mit der folgenden CSS- und HTML-Kombination erreicht werden:

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

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

Antwort:

Es ist tatsächlich möglich, eine neue Zeile in einem CSS-Datenattribut zu haben. Das bereitgestellte Beispiel zeigt jedoch nicht die korrekte Syntax. Um das gewünschte Ergebnis zu erzielen, können Sie die folgenden Schritte ausführen:

1. Ändern Sie Ihr Datenattribut:

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

In diesem aktualisierten HTML wird das neue Zeilenzeichen (a) durch die HTML-Entität ersetzt. Diese Entität stellt ein Zeilenvorschubzeichen (LF) dar, das eine neue Zeile im Inhalt erstellt.

2. Passen Sie Ihr CSS an:

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

Fügen Sie im CSS die folgenden Eigenschaften hinzu:

• white-space: pre; Behält den Leerraum in bei der Inhalt, einschließlich neuer Zeilen.
• display: inline-block; Verhindert, dass der Inhalt beschädigt wird Fluss des umgebenden Textes.

Dieses modifizierte CSS stellt sicher, dass der Inhalt des Datenattributs, einschließlich der neuen Zeile, wie vorgesehen angezeigt wird.

Das obige ist der detaillierte Inhalt vonKönnen Datenattribute in CSS neue Zeilenzeichen enthalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!