仅在CSS中上标？

的CSS CSS

DavaidTony宝儿

2020-03-23

如何仅在CSS中完成上标？

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

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

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

但这不起作用。

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

第2797篇《仅在CSS中上标？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共13个回答
樱 2020.03.23

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

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而导致浏览器处于怪异模式（或非标准模式）时，该解决方案是否能很好地工作。

JinJin猪猪 2020.03.23

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

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

蛋蛋Tom 2020.03.23

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

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

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

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

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

梅 2020.03.23

这是sup使用的确切方法：

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

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

米亚 2020.03.23

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

番长樱梅 2020.03.23

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

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

参见MDN。

乐米亚 2020.03.23

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

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

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

飞云 2020.03.23

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 }
米亚 2020.03.23

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

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

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

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}
斯丁前端 2020.03.23

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

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;
}
米亚 2020.03.23

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

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

您可以使用来做上标 vertical-align: super（加上相应的font-size减少项）。

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

伽罗 2020.03.23

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

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

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

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

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

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android