仅在CSS中上标？

320

如何仅在CSS中完成上标？

我有一个样式表，在其中用上标字符标记了外部链接，但是我很难使字符正确对齐。

我目前所拥有的看起来像这样：

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

但这不起作用。

自然，<sup>只有在content允许HTML的情况下，我才会使用-tag 。

css

— 亨里克·保罗
source

1

您似乎有一个差异：垂直对齐顶部但<sub>？假设您是说<sup>？

— cletus

在IE9中，“ vertical-align：text-top”不适用于我。但是，它是在FireFox 4.0中实现的。至少在Wordpress上下文中。

— JosefB 2011年

1

如果content允许使用HTML，则关注点分离会受到影响。

— 伊娃（Eva）2013年

489

您可以使用来做上标 vertical-align: super（加上相应的font-size归约法）。

但是，请务必阅读此处的其他答案，特别是paulmurray和cletus的答案，以获取有用的信息。

— 彼得·布顿
source

29

而且，font-size必须减小，以产生实际的上标效果。

— Nirmal

5

@paulmurray在下面的答案更加准确和全面。恕我直言，这应该是公认的答案。

— 道格·保罗

3

在以下三种排序答案的方式中，说“以下”并不会有所帮助。没错，保罗的答案是更好的答案，而且投票数超过5倍，这很疯狂。

— 彼得·布顿

188

老实说，我看不出仅在CSS中执行上标/下标的意义。它没有方便的CSS属性，只有一堆本地实现，包括：

.superscript { position: relative; top: -0.5em; font-size: 80%; }

或使用垂直对齐，或者我相信其他方法。事实是，它开始变得复杂：

CSS上标行间距
当心CSS为标/ Subcript为什么你可以说是不应该的风格上标/下标与CSS 可言 ;

第二点值得强调。通常，上标/下标实际上不是样式问题，但表示含义。

旁注：值得一提的是，该实体列表包含常见的数学上标和下标表达式，即使该问题与此无关。

sub / sup标签位于HTML和XHTML中。我只会用那些。

至于您的CSS的其余部分，：after伪元素和内容属性不受广泛支持。如果您真的不想手动将其放入HTML中，那么我认为基于Javascript的解决方案是您的第二选择。使用jQuery，这很简单：

$(function() {
  $("a.external").append("<sup>+</sup>");
};

— 克莱图斯
source

11

我认为“不受广泛支持”是指“ IE不支持”吗？

— Boldewyn

2

在兼容模式下，IE7及更低版本或IE8不支持quirksmode.org/css/contents.html。

— cletus 2010年

4

...这与我所说的完全一样，是的。

— Boldewyn

为了简化用SUP标签包装A标签的方法，请使用以下命令：$（“ a.external”）。wrap（“ <sup />”“）;

— 罗素

2

首先使用@PeterBoughton接受的解决方案，因为它不会使行高偏斜，所以选择了该解决方案。

— Nuri Hodges

129

CSS文档包含适用于所有HTML构造的行业标准CSS。那就是：大多数的网页浏览器，这些天没有明确处理SUB，SUP，B，I等等-他们（有点八九不离十）被转换成SPAN适当的CSS属性的元素，渲染引擎只与交易。

该页面为附录D。HTML4的默认样式表

您想要的位是：

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

— 保罗·默里
source

13

这可行，但是搞砸了line-height。恕我直言，唯一不会搞砸的方法line-height是position:relative按照cletus的建议使用：stackoverflow.com/a/501689/260080

— Marco Demaio 2012年

27

我正在制作一个页面，目的是使文本清晰易读，上标元素不会改变行的顶部和底部页边距-有以下发现：

line-height: 1.5em例如，如果您的主文本是，则应减小上标文本的行高，以使其正确显示。我用过line-height: 0.5em。

而且，vertical-align: super在大多数浏览器中都可以正常工作，但是在IE8中，当您有上标元素时，该行的其余部分将被向下推。因此，相反，我vertical-align: baseline与否定项一起使用top并position: relative实现了相同的效果，这似乎在浏览器中效果更好。

因此，添加到“本地实现”中：

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

— 莱桑·瓦兹（Lesean Vaezi）
source

当放置在div容器中时，这会中断

— Alex G

13

http://htmldog.com/articles/superscript/本质上：

position: relative;
bottom: 0.5em;
font-size: 0.8em;

据我所知，在实践中效果很好。

— 尼克·普雷斯塔
source

10

以下摘自Mozilla Firefox的内部html.css：

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

因此，在您的情况下，可能是这样的：

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

— 克里斯汀·斯塔德勒
source

5

这是另一个干净的解决方案：

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

这样，您仍然可以使用sup / sub标记，但是您已修复了它们的愚蠢行为，总是弄乱了段落行高。

现在，您可以执行以下操作：

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

而且您的段落行高也不会搞砸。

在IE7，IE8，FF3.6，SAFARI4，CHROME5，OPERA9上测试

我使用进行了测试p {line-height: 1.3;}（除非您希望行贴得太紧，否则行高是必须的），并且它仍然有效，因为“ -0.6em”的量很小，因此子行/子文本也适合该行高而且不要互相越过

忘记了可能相关的细节，我总是在页面的第一行中使用DOCTYPE （特别是我使用HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）。因此，由于缺乏DOCTYPE或未触发标准/几乎标准模式的DOCTYPE，我不知道此解决方案在浏览器处于怪癖模式（或非标准模式）时是否能很好地工作。

— 马可·德马约
source

4

如果要更改字体大小，则可能要停止使用以下规则缩小字体大小：

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

— 随便
source

1

我不确定这是否相关，但是我无法解决²HTML实体的问题，因为我无法在标签内添加任何其他html标签<label>。因此，这个想法是使用ASCII代码而不是CSS或HTML标签。

— 弓手
source

0

检出：http : //www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

如果看起来像您想要“ vertical-align：text-top”

— 弗兰克·施维特曼
source

0

CSS属性font-variant-position正在考虑中，并且最终可能是该问题的答案。截至2017年初，仅Firefox支持它。

.super {
    font-variant-position: super;
}

参见MDN。

— 哈希变化
source

现在是2020年春季，除Firefox之外，其他浏览器均不支持。嗯…

— Jens

0

相关或可能不相关，将上标用作HTML元素或文本中的span + css可能会导致本地化问题-在本地化程序中。

例如，让我们说“3 ^次第三方软件”：

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

译者如何翻译“ rd”？他们可以将其保留为几种西里尔语言为空，但是其他外来或RTL语言呢？

在这种情况下，最好避免使用上标并使用完整的措辞，例如“第三方软件”。或者，如此处其他注释中所述，通过jQuery在上标中添加加号。

— 努比亚人
source

-1

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

— 拉兹万·塞塞拉鲁（Razvan Cercelaru）
source

-1

这是sup使用的确切方法：

.superscript{
    vertical-align:super;
    font-size:smaller;
}

通过谷歌浏览器检查元素发现了这一点。

— 嘻哈
source