CSS の疑似要素コンテンツに改行を追加するにはどうすればよいですか?

擬似要素コンテンツへの改行の組み込み

::after または ::before 擬似要素の content プロパティに複数行を追加する読みやすさと書式を向上させることができます。ただし、CSS のみを介してこの操作を実行するには課題があります。

「A」エスケープ シーケンスの使用

コンテンツ プロパティのドキュメントでは、「A」エスケープ シーケンスを使用して次のことを行うことが推奨されています。生成されたコンテンツ内に改行を含めます。この挿入された改行は、'white-space' プロパティに従います。

その応用例を説明するために、次の例を考えてみましょう。

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

このコードは、「Office」の間に改行を追加します。コンテンツを複数行にフォーマットする「モバイル」テキスト。 http://jsfiddle.net/XkNxs/ でライブ デモンストレーションをご覧ください。

注意事項

任意の文字列をエスケープする場合は、「A」の代わりに「0000a」を使用してください。後続の文字が数値または 16 進数値に似ていることから生じる予期せぬ結果を防ぐため。これを安全に実現するための関数の例:

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

以上がCSS の疑似要素コンテンツに改行を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。