web-dev-qa-db-ja.com

CSSコンテンツを使用してHTMLエンティティを追加する

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

このようなものを使用すると、中断しないスペースではなく が画面に表示されるだけです。

.breadcrumbs a:before {
    content: ' ';
}
htmlcsshtml-entitiescss-content
938
nickf

あなたはエスケープされたユニコードを使わなければなりません：

好き

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

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

991
mathieu

CSSはHTMLではありません。  は、HTMLの名前付き 文字参照 です。 10進数の数字参照 と同等です。 160は、 nicode （または CS-2 のNO-BREAK SPACE文字の10進数code pointです。 HTML 4.01仕様 ）。そのコードポイントの16進数表現はU + 00A0（160 = 10×161 + 0×16）。これはUnicode コードチャート および キャラクターデータベース にあります。

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を意味し、適切なフォントがある場合はmeanを意味します。）

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

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

  • 先行ゼロは不要であり、数字を数える必要がないため、typeの方が簡単です。
  • readの方が簡単です。エスケープシーケンスと後続のテキストの間に空白があり、数字を数える必要がないためです。
  • 先行ゼロは必要ないため、itは必要なスペースが少なくなります。
  • これはupwards-compatibleです。これは、将来U + 10FFFFを超えるコードポイントをサポートするUnicodeがCSS仕様の変更を必要とするためです。

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

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

–または明示的にする：

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

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

163
PointedEars

更新 ：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を として使用する。あなたが試した場合、mathieuとmillikinが示唆しているように：

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

Bを16進数のエスケープ文字に変換します。同じことが0-9a-fA-Fについても起こります。

79
dlamblin

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

シンボルをその16進数に変換する最も簡単な方法は、▼（▾）から\25BEへの変換のように、Microsoftの電卓を使用することです。

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

44
netgoblin

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

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

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

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

ただし、ブレッドクラムにdisplay:inline-blockなどを設定する必要があるかもしれません。

16
Dare

例えば ​​：

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

例：あなたがあなたのキャラクターを選択したいのなら、私は "＆＃8620" "＆＃x21ac"を選択しました（ _ hex _ valuesを使います）

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

結果：↬

それでおしまい ：）

8
Ferhat KOÇER

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

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

私は以前にこの方法を使ったことがあります。私のテストでは、それはサイドに ">"を付けて他の行に完璧にラップしています。

0
brian-welch