Wie fügt man mehrzeiligen Text in CSS-Pseudoelemente ein?

Einfügen von mehrzeiligem Text in Pseudoelemente

Wenn Sie den Inhalt einer Webseite ausschließlich durch CSS-Änderungen ändern, kann es erforderlich sein, mehrere Zeilen einzubinden -Zeilentext in ::after- oder ::before-Pseudoelemente. Während herkömmliche HTML-Zeilenumbrüche in diesem Zusammenhang nicht unterstützt werden, bietet die Verwendung von Escape-Sequenzen eine Lösung.

Lösung

Die CSS-Inhaltseigenschaft ermöglicht die Einbeziehung von Zeilenumbrüchen durch Einbetten der Escape-Sequenz „A“ in die Inhaltszeichenfolge. Die resultierenden Zeilenumbrüche unterliegen jedoch weiterhin der Eigenschaft „white-space“. Um das mehrzeilige Format beizubehalten, ist es daher wichtig, „white-space: pre;“ festzulegen. oder 'white-space: pre-wrap;'.

Zum Beispiel:

#headerAgentInfoDetailsPhone::after {
  content: "Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

Empfehlung

Für eine verbesserte Kreuzkompatibilität ist es Es wird empfohlen, bei der Verarbeitung von Unicode-Zeilenumbrüchen die Sequenz „0000a“ anstelle von „A“ zu verwenden. Dieser Ansatz stellt genaue Zeilenumbrüche trotz potenzieller Unsicherheiten bei der Zeichenfolgenmanipulation sicher.

Das obige ist der detaillierte Inhalt vonWie fügt man mehrzeiligen Text in CSS-Pseudoelemente ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!