148

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

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

例では、HTML の改行要素は、達成したいことを視覚化するためだけのものです。

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

8 に答える 8

288

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')} }"`;
}
于 2013-06-11T15:21:04.130 に答える