:: afterまたは:: before疑似要素コンテンツに改行を追加する

ページのHTMLまたはPHPにアクセスできず、CSSを介してのみ編集できます。私はサイトに変更を加えて、::afterまたはを介してテキストを追加しています::before疑似要素を、追加されたコンテンツの前後のスペースなどにエスケープUnicodeを使用する必要があることを発見しました。

contentプロパティに複数の行を追加するにはどうすればよいですか？

例では、HTMLの改行要素は、私が達成したいことを視覚化することのみを目的としています。

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

contentプロパティの状態：

作成者は、「content」プロパティの後の文字列の1つに「\ A」エスケープシーケンスを書き込むことにより、生成されたコンテンツに改行を含めることができます。この挿入された改行は、依然として「空白」プロパティの影響を受けます。「\ A」エスケープシーケンスの詳細については、「文字列」と「文字と大文字と小文字」を参照してください。

だからあなたは使うことができます：

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

http://jsfiddle.net/XkNxs/

ただし、任意の文字列をエスケープする場合は、の\00000a代わりに使用することをお勧めします。新しい行が続く\A数字または[a-f]文字が予期しない結果をもたらす可能性があるためです。

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

基本を説明する素晴らしい記事（ただし、改行は扱いません）。

驚くべきものの疑似要素の束全体で実行できます

1つの行が別の要素内の次の行に分割される2つのインライン要素が必要な場合は、擬似要素：afterにcontent： '\ A'およびwhite-space：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;
}

ツールチップに新しい行が必要でした。このCSSを：afterに追加する必要がありました。

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

ワードラップが必要なようです。

さらに、\ Aは表示するテキストの中央で機能せず、改行を強制しました。

 
 

働いた。それから私はそのようなツールチップを得ることができました：

あなたはこれを試すことができます

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

Jsフィドル

「疑似要素のコンテンツを動的に変更して新しい行記号を追加する方法」を探す人のための答えはこちら


これらの文字はドキュメントのレンダリング時に変更されるため、JavaScriptを使用したHTMLへの追加などのHTML文字は機能しません

代わりに、U + 000DとU + 000Aであるこの文字のユニコード表現を見つける必要があるので、次のようなことができます

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> 

これが誰かの時間、幸運を救うことを願っています:)

改行::afterまたは::before疑似要素コンテンツを追加する

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

同じことを尋ねているように見えるこの質問が見つかりました：CSSの「コンテンツ」プロパティの改行文字シーケンス？

を使用し\Aたり\00000a、newline

<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>

.mbrと.dbrクラスは、CSSの使用改行の挙動をシミュレートすることができますテーブル：ディスプレイを。実際の<br />を置き換えたい場合に便利です。

：このデモCodepenチェックアウトhttps://codepen.io/Marko36/pen/RBweYY、
および応答部位の使用でこのポスト：指定されたブレークポイントでシミュレート<br />：応答改行を。