1092

CSS contentプロパティを使用してHTMLエンティティを追加するにはどうすればよいですか?

このようなものを使用する と、非分割スペースの代わりに画面に出力されます:

.breadcrumbs a:before {
  content: ' ';
}
4

9 に答える 9

1143

エスケープされた unicode を使用する必要があります:

お気に入り

.breadcrumbs a:before {
  content: '\0000a0';
}

詳細: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

于 2008-10-10T07:27:52.243 に答える
190

CSS は HTML ではありません。 HTML の名前付き文字参照です。10 進数字参照に相当します 。160 は、Unicode (またはUCS-2 ; HTML 4.01 仕様を参照)の文字の 10 進コード ポイントです。そのコード ポイントの 16 進表現は U+00A0 (160 = 10 × 16 1 + 0 × 16 0 ) です。それは Unicode Code Charts and Character Databaseにあります。NO-BREAK SPACE

CSS では、そのような文字に Unicode エスケープ シーケンスを使用する必要があります。これは、文字のコード ポイントの 16 進値に基づいています。だからあなたは書く必要があります

.breadcrumbs a:before {
  content: '\a0';
}

これは、エスケープ シーケンスが文字列値の最後にある限り機能します。文字が続く場合、誤解を避けるには 2 つの方法があります。

a）（他の人が言及）エスケープシーケンスには正確に6桁の16進数を使用してください：

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) エスケープ シーケンスの後に 1 つの空白文字 (スペースなど) を追加します。

.breadcrumbs a:before {
  content: '\a0 foo';
}

(fは 16 進数なので、\a0fそうでなければGURMUKHI LETTER EEここを意味するか、適切なフォントがあれば ਏ を意味します。)

区切りの空白は無視され、これが表示されます。 fooここに表示されるスペースはNO-BREAK SPACE文字になります。

空白のアプローチ ( ) には、6 桁のアプローチ ( )'\a0 foo'よりも次の利点があります。'\0000a0foo'

  • 先行ゼロが不要であり、桁数を数える必要がないため、入力が簡単です。
  • エスケープ シーケンスとそれに続くテキストの間に空白があり、数字を数える必要がないため、読みやすくなります。
  • 先行ゼロが必要ないため、スペースが少なくて済みます。
  • 将来的に U+10FFFF を超えるコードポイントをサポートする Unicode では、CSS 仕様の変更が必要になるため、これは上位互換性があります。

したがって、エスケープ文字の後にスペースを表示するには、スタイルシートで2 つのスペースを使用します –</p> 

.breadcrumbs a:before {
  content: '\a0  foo';
}

– または明示的にする:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

詳細については、CSS 2.1 のセクション「4.1.3 文字と大文字と小文字の区別」を参照してください。

于 2011-12-21T20:18:08.320 に答える
84

更新: PointedEars は&nbsp;、すべての css 状況での正しいスタンドは
'\a0 '、スペースが 16 進文字列のターミネータであり、エスケープされたシーケンスによって吸収されることを意味すると述べています。彼はさらに、この信頼できる説明を指摘しました。これは、私が説明し、以下で修正した問題に対する適切な解決策のように思えます。

あなたがする必要があるのは、エスケープされたユニコードを使用することです。あなたが言われたことにもかかわらず、 CSS 内\00a0の完全な代役ではありません。&nbsp;だから試してください：

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No&nbsp;Break as opposed to below */

具体的には as を使用\0000a0し&nbsp;ます。mathieuとmillikinが示唆するように、試してみると：

content:'No\00a0Break'   /* becomes No&#2571;reak */

B を 16 進エスケープ文字に取り込みます。同じことが 0-9a-fA-F でも発生します。

于 2009-09-11T19:09:41.020 に答える
51

CSS では、HTML エンティティの代わりに Unicode エスケープ シーケンスを使用する必要があります。これは、文字の 16 進値に基づいています。

シンボルを同等の 16 進数に変換する最も簡単な方法は、Microsoft 電卓を使用する&#9662;ことです ( ▾ ( )など)。\25BE

はい。プログラマー モードを有効にし、10 進法をオンにして、 と入力9662し、次に 16 進に切り替えると、 が得られます25BE。\次に、先頭にバックスラッシュを追加します。

于 2011-12-15T16:55:07.757 に答える
35

非改行スペースには 16 進コードを使用します。このようなもの：

.breadcrumbs a:before {
  content: '>\00a0';
}
于 2008-10-10T07:24:21.623 に答える