Fügen Sie einen Zeilenumbruch zu :: after oder :: before pseudo-element content hinzu

Ich habe keinen Zugriff auf HTML oder PHP für eine Seite und kann nur über CSS bearbeiten. Ich habe Änderungen an einer Site vorgenommen und Text über die ::afteroder ::beforePseudo-Elemente hinzugefügt und festgestellt, dass Escape-Unicode für Dinge wie ein Leerzeichen vor oder nach dem hinzugefügten Inhalt verwendet werden sollte.

Wie füge ich der contentEigenschaft mehrere Zeilen hinzu ?

Im Beispiel dient das HTML-Zeilenumbruchelement nur dazu, zu visualisieren, was ich erreichen möchte:

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

Die contentEigenschaft besagt:

Autoren können Zeilenumbrüche in den generierten Inhalt einfügen, indem sie die Escape-Sequenz "\ A" in eine der Zeichenfolgen nach der Eigenschaft "content" schreiben. Dieser eingefügte Zeilenumbruch unterliegt weiterhin der Eigenschaft "Leerzeichen". Weitere Informationen zur Escape-Sequenz "\ A" finden Sie unter "Zeichenfolgen" und "Zeichen und Groß- / Kleinschreibung".

So können Sie verwenden:

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

http://jsfiddle.net/XkNxs/

Wenn Sie jedoch beliebigen Zeichenfolgen entkommen, ist es ratsam, \00000astattdessen zu verwenden \A, da jede Zahl oder jedes [a-f]Zeichen, auf das die neue Zeile folgt, unvorhersehbare Ergebnisse liefern kann :

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

Schöner Artikel, der die Grundlagen erklärt (behandelt jedoch keine Zeilenumbrüche).

Ein ganzer Haufen erstaunlicher Dinge, die Pseudoelemente tun können

Wenn Sie zwei Inline-Elemente benötigen, bei denen eines in die nächste Zeile innerhalb eines anderen Elements einbricht, können Sie dies erreichen, indem Sie ein Pseudoelement hinzufügen: after mit Inhalt: '\ A' und Leerzeichen: pre

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

Ich musste neue Zeilen in einem Tooltip haben. Ich musste dieses CSS auf meinem hinzufügen: nach:

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

Der Zeilenumbruch scheint notwendig.

Außerdem funktionierte das \ A in der Mitte des anzuzeigenden Textes nicht, um eine neue Zeile zu erzwingen.

 
 

hat funktioniert. Ich konnte dann einen solchen Tooltip bekommen:

Sie können dies versuchen

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

Js Geige

Für Leute, die nach "Wie man den Inhalt eines Pseudoelements dynamisch ändert, indem man ein neues Zeilenzeichen hinzufügt" suchen, hier die Antwort

HTML-Zeichen wie 
funktionieren nicht, wenn sie mit JavaScript an HTML angehängt werden, da diese Zeichen beim Rendern von Dokumenten geändert werden

Stattdessen müssen Sie eine Unicode-Darstellung dieser Zeichen finden, die U + 000D und U + 000A sind, damit wir so etwas tun können

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div> 

Hoffe das spart jemandem Zeit, viel Glück :)

Zeilenumbruch ::afteroder ::beforePseudoelementinhalt hinzufügen

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

Haben Sie hier diese Frage gefunden, die dasselbe zu stellen scheint: Zeilenumbruchzeichenfolge in der CSS-Eigenschaft 'content'?

Sieht aus wie Sie verwenden können \Aoder \00000aum eine zu erreichennewline

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

Die Klassen .mbr und .dbr können das Zeilenumbruchverhalten mithilfe der CSS- Anzeige: table simulieren . Nützlich, wenn Sie echte <br /> ersetzen möchten.

Sehen Sie sich diese Demo aus Codepen: https://codepen.io/Marko36/pen/RBweYY ,
und diesen Beitrag auf ansprechende Website Verwendung: Responsive Zeilenumbrüche: Simulieren <br /> bei bestimmten Haltepunkten .