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

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 3 · Accepted Answer

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

并且没有CSS技巧。

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

score 0 · Accepted Answer

我认为你被 Javascript 困住了，除非你能得到你用 AJAX 调用的服务，以两种元素返回每个价格：欧元和美分：

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

当然，如果它们是单独的元素，它们将很容易单独设置样式。

score 0 · Accepted Answer

CSS 上标和下标：

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

_（来源）