Heim > Web-Frontend > CSS-Tutorial > Wie füge ich Zeilenumbrüche in ::after oder ::before Pseudoelement-Inhalte ein?

Wie füge ich Zeilenumbrüche in ::after oder ::before Pseudoelement-Inhalte ein?

Linda Hamilton
Freigeben: 2024-11-19 13:31:02
Original
481 Leute haben es durchsucht

How to Insert Line Breaks in ::after or ::before Pseudo-Element Content?

Zeilenumbrüche in ::after oder ::before-Pseudoelementinhalten

Das Anpassen des Inhalts von ::after oder ::before-Pseudoelementen in CSS kann zu Verbesserungen führen die Darstellung von Elementen. Das Einfügen mehrerer Zeilen in die Inhaltseigenschaft stellt jedoch eine Herausforderung dar.

Um dieser Herausforderung zu begegnen, bietet CSS einen Mechanismus zum Einfügen von Zeilenumbrüchen mithilfe der Escape-Sequenz „A“. Die folgende Regel zeigt, wie:

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

Durch Angabe der „white-space“-Eigenschaft als „pre“ oder „pre-wrap“ wird der Zeilenumbruch berücksichtigt und entsprechend angezeigt.

Beim Escapen beliebiger Zeichenfolgen ist jedoch Vorsicht geboten. Anstelle von „A“ wird empfohlen, „0000a“ zu verwenden, um unvorhersehbare Ergebnisse zu vermeiden, die durch Zeichen nach der neuen Zeile verursacht werden.

Hier ist eine JavaScript-Funktion, mit der Sie einem CSS-Stil Text mit der erforderlichen Escape-Sequenz hinzufügen können :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}
Nach dem Login kopieren

Mit dieser Technik können Sie problemlos mehrere Zeilen in die Inhaltseigenschaft von ::after- oder ::before-Pseudoelementen integrieren und so die visuelle Darstellung Ihrer Elemente verbessern.

Das obige ist der detaillierte Inhalt vonWie füge ich Zeilenumbrüche in ::after oder ::before Pseudoelement-Inhalte ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage