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

Einbinden von Zeilenumbrüchen in Pseudoelementinhalte

Hinzufügen mehrerer Zeilen zur Inhaltseigenschaft von ::after- oder ::before-Pseudoelementen kann die Lesbarkeit und Formatierung verbessern. Die Ausführung dieses Vorgangs ausschließlich über CSS stellt jedoch eine Herausforderung dar.

Verwendung der Escape-Sequenz „A“

In der Dokumentation der Inhaltseigenschaften wird die Verwendung der Escape-Sequenz „A“ vorgeschlagen Fügen Sie Zeilenumbrüche in den generierten Inhalt ein. Dieser eingefügte Zeilenumbruch folgt der Eigenschaft „Leerzeichen“.

Um seine Anwendung zu veranschaulichen, betrachten Sie das folgende Beispiel:

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

Dieser Code fügt einen Zeilenumbruch zwischen dem „Office“ und „mobiler“ Text, wobei der Inhalt in mehrere Zeilen formatiert wird. Sehen Sie sich die Live-Demonstration unter http://jsfiddle.net/XkNxs/ an.

Vorsichtshinweis

Wenn Sie beliebige Zeichenfolgen maskieren, verwenden Sie „0000a“ anstelle von „A“. um unvorhersehbare Ergebnisse zu verhindern, die dadurch entstehen, dass nachfolgende Zeichen numerischen oder hexadezimalen Werten ähneln. Eine Beispielfunktion, um dies sicher zu erreichen:

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 Zeilenumbrüche zu Pseudoelementinhalten in CSS hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!