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

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 */
}

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')} }"`;
}

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!