使用CSS或其他方法代替JS将小数显示为上标

Question

我有很多：

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

客户想让我替换为：

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

好的，让我们来谈一谈JavaScript...但等等！

通过一些花式CSS/CSS技巧，难道不能获得等效的结果吗？

（大数字，没有小数点，角标为分 - 我的小数分隔符）

顺祝商祺，

Steen

注意：这个也可以正常工作：

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

但是我们更倾向于使用所有的CSS/CSS3解决方案。

- Steen

---

我不理解。<sup> 标签将创建上标。如果不是那个，你想要什么？ - Scott

他不想使用其他元素来实现那种外观。我认为你不能仅通过CSS做到这一点。你必须至少使用JavaScript或更改显示价格的代码。 - Mihai Matei

打开Notepad++，将所有的,替换为<sup>，将</span>替换为</sup></span>。我想你可以做到这个吧？ - Mr_Green

我通过ajax获取价格信息并将其加载到页面中。为了提高性能和让用户看到原始内容，我希望尽可能避免使用任何js。 - Steen

有趣的是，当涉及到添加微不足道的格式标记时，您关心性能，但看起来您正在使用jQuery（比使用本机JS功能要慢得多）。 - cimmanon

@cimmanon - 见笑了.... :-) 那个必须重新制作... - Steen

Answer 1

最好的方法是找到所有价格并添加 HTML <sup> ... </sup>，因为如果有人不加载 JavaScript，则没有HTML标记。 而且没有CSS的技巧来解决这个问题。 唯一能做的是使用CSS为<sup>元素应用样式。

- Andrea Turri

---

有时候“不”就是正确的答案 :-）。感谢您抽出时间回答。 - Steen

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;
 }

- Jukka K. Korpela

Answer 3

我认为除非你能够通过AJAX调用的服务返回每个价格的两个元素：欧元和分，否则你将被困在Javascript中。

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

当然，如果它们是独立的元素，那么很容易分别进行样式设置。

- jalynn2

Answer 4

CSS 上标和下标：

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

_(来源)

- ashleedawg