Wie füge ich mithilfe von CSS Zeilenumbrüche zu Pseudoelementinhalten hinzu?

Zeilenumbrüche zu Pseudoelementinhalten mithilfe von CSS hinzufügen

Einführung

Beim Hinzufügen von Text B. über ::after- oder ::before-Pseudoelemente in CSS ohne Zugriff auf HTML oder PHP, besteht die Notwendigkeit, Zeilenumbrüche für mehrzeilige Inhalte einzubauen. In diesem Artikel erfahren Sie, wie Sie dies mithilfe von CSS erreichen.

Zeilenumbrüche hinzufügen

Um Zeilenumbrüche in der Inhaltseigenschaft hinzuzufügen, verwenden Sie die Escape-Sequenz „A“. Der eingefügte Zeilenumbruch unterliegt jedoch der Eigenschaft „Leerzeichen“.

Beispiel

Betrachten Sie zur Veranschaulichung den folgenden Code:

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

Dadurch wird nach „XXXXX“ ein Zeilenumbruch eingefügt und der Inhalt angezeigt als:

Office: XXXXX
Mobile: YYYYY

Alternative Escape-Sequenz

Wenn bei der Verwendung von A unvorhersehbare Ergebnisse auftreten, ist es ratsam, stattdessen 0000a zu verwenden. Dadurch wird sichergestellt, dass beliebige Zeichenfolgen korrekt maskiert werden.

Beispiel einer Escape-Funktion

Der Einfachheit halber können Sie die folgende JavaScript-Funktion verwenden, um beliebigen Text zu maskieren und ihn einem CSS hinzuzufügen Stilblock:

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

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von CSS Zeilenumbrüche zu Pseudoelementinhalten hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!