html - jsの代わりにCSSまたはその他を使用して、小数を上付き文字として表示する

Question

私はたくさんのを持っています：

<span class="price">17.998,80</span>

お客様は私を次のものに交換することを望んでいます：

<span class="price">17.998<sup>80</sup></span>

...元気です、javascriptをしましょう...しかし待ってください！

いくつかの凝ったCSS/CSSトリックでは同等の結果が得られないでしょうか？

（大きな$の数字、小数点なし、上付き文字-、は私の小数点区切り文字です）

敬具、

スティーン

注：これは正常に機能します：

$('span.price').html($('span.price').html().replace(',','<sup>')+'</sup>');

ただし、すべてのCSS/CSS3ソリューションが優先されます

score 3 · Accepted Answer

最良の方法は、すべての価格を見つけてHTMLを追加する<sup> ... </sup>ことです。これは、誰かがjavascriptをロードしない場合、HTMLマークアップがないためです。

そして、それにCSSのトリックはありません。

CSSが行う唯一のことは、<sup>要素にスタイルを適用することです。

score 3 · Accepted Answer

いいえ、この目的のためのCSSトリックはありません。コンテンツの小数点以下の桁を要素に変換せずに参照することはできません。

要素は、文字を上付きsup文字の位置に配置して指数のように見せるため、目的にはあまり適していません。より良いアプローチは、生成することです

<span class="price">17.998<span class="cents">80</span></span>

そしてそれをスタイリングします

 .cents {
   font-size: 0.7em;
   position: relative;
   bottom: 0.25em;
 }

score 0 · Accepted Answer

ユーロとセントの2つの要素で各価格を返すために、AJAXで呼び出しているサービスを取得できない限り、Javascriptに固執していると思います。

<span class="priceEuros">17.998</span>,<span class="priceCents">80</span>

もちろん、それらが別々の要素である場合、それらは別々にスタイリングするのは簡単です。

score 0 · Accepted Answer

CSS上付き文字と下付き文字：

.super{
  vertical-align: super;
 }
.sub{
  vertical-align: sub;
 }

_（出典）