CSSコンテンツを使用したHTMLエンティティの追加

CSS contentプロパティをどのように使用してHTMLエンティティを追加しますか？

このようなものを使用する と、改行しないスペースの代わりに画面に出力されます。

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

エスケープされたユニコードを使用する必要があります：

お気に入り

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

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

CSSはHTMLではありません。 HTMLの 名前付き文字参照です。10進数の文字参照と同等 です。160は、Unicode（またはUCS-2 ; HTML 4.01仕様を参照）での文字の10進コードポイントです。そのコードポイントの16進数表現はU + 00A0（160 = 10×16 ¹ + 0×16 ⁰）です。あなたはそれをユニコードコードチャートとキャラクターデータベースで見つけるでしょう。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文字になります。

ホワイトスペースアプローチ（'\a0 foo'）には、6桁のアプローチ（'\0000a0foo'）よりも次のような利点があります。

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

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

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

–またはそれを明示的にする：

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

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

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

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

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

具体的には\0000a0として使用し ます。あなたがしようとすると、マチウとミリキンによって示唆されたように：

content:'No\00a0Break'   /* becomes No਋reak */

Bを16進数のエスケープ文字に入れます。同じことが0-9a-fA-Fでも起こります。

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

シンボルを16進数に変換する最も簡単な方法は、▾（▾）から\25BEMicrosoftの計算機を使用することなどです。

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

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

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

nbsp開いているCharMap を貼り付けて、文字160をコピーする方法があります。ただし、この場合は、おそらく次のようにパディングでスペースを空けます。

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

display:inline-blockただし、パンくずリストなどを設定する必要があるかもしれません。

例えば ​​：

http://character-code.com/arrows-html-codes.php

例：キャラクターを選択する場合は、「＆＃8620」「＆＃x21ac」を選択しました（HEX値を使用しています）

.breadcrumbs a:before {
    content: '\0021ac';
}

結果：↬

それでおしまい ：）

私はこれがかなり古い投稿であることを知っていますが、間隔がすべてあなたの後になら、なぜ単純ではないのですか？

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

以前にこの方法を使用しました。私のテストでは、「>」を使用して他の行に完全に折り返しています。

2つの方法は次のとおりです。

• HTML：

  <div class="ics">&#9969;</div>

これは⛱になります

• Cssの場合：

  .ics::before {content: "\9969;"}

HTMLコード <div class="ics"></div>

これもin