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

Adding Line Breaks to Pseudo-Element Content Using CSS

Introduction

When adding text via ::after or ::before pseudo-elements in CSS without access to HTML or PHP, the need arises to include line breaks for multi-line content. This article addresses how to achieve this using CSS.

Adding Line Breaks

To add line breaks in the content property, use the "\A" escape sequence. However, the inserted line break is subject to the "white-space" property.

Example

To illustrate, consider the following code:

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

This will add a line break after "XXXXX" and display the content as:

Office: XXXXX
Mobile: YYYYY

Alternative Escape Sequence

If you encounter unpredictable results when using \A, it's advisable to use \00000a instead. This ensures that arbitrary strings are correctly escaped.

Example Escape Function

For convenience, you can use the following JavaScript function to escape arbitrary text and add it to a CSS style block:

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!