CSS を使用して疑似要素コンテンツに改行を追加する方法

CSS を使用して擬似要素コンテンツに改行を追加する

はじめに

テキストを追加する場合HTML やPHP では、複数行のコンテンツに改行を含める必要があります。この記事では、CSS を使用してこれを実現する方法について説明します。

改行の追加

コンテンツ プロパティに改行を追加するには、「A」エスケープ シーケンスを使用します。ただし、挿入された改行は「空白」プロパティの影響を受けます。

例

説明のために、次のコードを考えてみましょう。

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

「XXXXX」の後に改行が追加され、内容が表示されます例:

Office: XXXXX
Mobile: YYYYY

代替エスケープ シーケンス

A の使用時に予期しない結果が発生した場合は、代わりに 0000a を使用することをお勧めします。これにより、任意の文字列が正しくエスケープされます。

エスケープ関数の例

便宜上、次の JavaScript 関数を使用して任意のテキストをエスケープし、CSS に追加できます。スタイルブロック:

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

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