使用CSS或其他代替js来显示小数作为上标

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解决方案

Answer 1

最好的方法是找到所有价格并添加HTML <sup> ... </sup>，因为如果有人不加载javascript，则没有 HTML标记。

并且没有 CSS 技巧。

CSS 唯一能做的就是将样式应用于<sup>元素。

Answer 2

不，没有CSS技巧用于此目的：您不能在内容中引用小数点后的数字而不将其转换为元素。

sup元素实际上并不适用于此目的，因为它将字符放在上标位置，使它们看起来像一个指数。更好的方法是生成

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

并使用

设置样式

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

Answer 3

我认为你坚持使用Javascript，除非你能通过AJAX获得服务，以两个元素返回每个价格：欧元和美分：

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

当然，如果它们是独立的元素，它们很容易分开设计。

Answer 4

CSS上标和下标：

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

_（Source）