Können CSS-Datenattribute Zeilenumbrüche mit Pseudoelementen rendern?

CSS-Datenattribute, Newline-Zeichen und Pseudoelement-Inhaltswerte

Können Sie Newline-Zeichen in CSS-Datenattribute integrieren, sodass sie mithilfe von Pseudoelementen angezeigt werden können? ? Lassen Sie uns dieses Szenario untersuchen.

Betrachten Sie den folgenden CSS- und HTML-Code:

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

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

In diesem Szenario ist das „a“-Zeichen, das in CSS voraussichtlich ein Zeilenumbruchzeichen ist, führt nicht zum gewünschten Ergebnis.

Lösung:

Um das gewünschte Verhalten zu erzielen, ändern Sie das Datenattribut wie folgt:

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

Erklärung:

• Die Die Notation stellt ein Zeilenumbruchzeichen in HTML dar.
• Das Hinzufügen einer Leerzeicheneigenschaft zum Pseudoelement, erreicht durch „white-space: pre;“ Stil, behält den Leerraum innerhalb des Datenattributs bei.
• Der „display: inline-block;“ Mit dem Stil kann das Pseudoelement mehrere Zeilen umbrechen.
• Dadurch wird der Inhalt des Datenattributs, einschließlich des Zeilenumbruchzeichens, wie erwartet gerendert.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Datenattribute Zeilenumbrüche mit Pseudoelementen rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!