我如何在CSS中实现上标?
我有一个样式表,其中我使用上标字符标记外部链接,但我很难使字符正确对齐。
目前我的实现效果如下:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
但它不起作用。
当然,如果content
允许使用HTML,我将使用<sup>
标签...
我如何在CSS中实现上标?
我有一个样式表,其中我使用上标字符标记外部链接,但我很难使字符正确对齐。
目前我的实现效果如下:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
但它不起作用。
当然,如果content
允许使用HTML,我将使用<sup>
标签...
你可以通过使用 vertical-align: super
(加上一个相应的font-size
减小)来创建上标。
但是,一定要仔细阅读其他回答,特别是由paulmurray和cletus提供的有用信息。
说实话,我不认为仅使用CSS来进行上标/下标的操作有什么意义。 CSS中没有方便的属性可以用来实现这一点,只能使用一些自定义的实现方式,例如:
.superscript { position: relative; top: -0.5em; font-size: 80%; }
或者使用垂直对齐或其他方式。问题在于,它开始变得复杂:
第二点值得强调。通常,上标/下标实际上并不是一种样式问题,而是具有特定的含义。
顺便提一下:值得一提的是这个常见数学上标和下标表达式的实体列表,即使这个问题与此无关。
HTML和XHTML中都有sub / sup标签,我建议只使用这些标签。
至于您的CSS的其余部分,:after伪元素和content属性的支持并不广泛。如果您真的不想在HTML中手动输入此内容,则认为基于JavaScript的解决方案是您的下一个最佳选择。 使用jQuery这很简单:
$(function() {
$("a.external").append("<sup>+</sup>");
};
<sup>
包装成了<span class="superscript"></span>
,在CSS中实现会比重写整个系统更容易。换句话说,我想表达的是,无论在CSS中还是在HTML中进行上标处理是否合理超出了问题的范畴。 - RolfSUB
,SUP
,B
,I
等元素 - 它们(有点儿)被转换为具有适当CSS属性的SPAN
元素,渲染引擎则只处理它们。small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
line-height
。我认为,不影响line-height
的唯一方法是使用position:relative
,就像cletus建议的那样:https://dev59.com/u3RB5IYBdhLWcg3wz6ad#501689 - Marco Demaiosub { vertical-align: sub; line-height: 1.0; }
用于下标,sup { vertical-align: super; line-height: 1.0; }
用于上标。不需要担心定位问题。 - Jordan Clark我正在制作一个页面,希望文本清晰易读,并且设置上标元素后不改变行的上下边距 - 根据以下观察结果:
如果您的主要文本设置为例如 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;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
所以,在您的情况下,它会是这样的:
.superscript {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
基本上:
http://htmldog.com/articles/superscript/
position: relative;
bottom: 0.5em;
font-size: 0.8em;
据我所知,实践证明效果良好。
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 */
这样,您仍然可以使用上标/下标标记,但是您解决了它们常常破坏段落行高的麻烦行为。
所以现在您可以这样做:
<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">
)。因此,我不知道当浏览器处于quirk模式(或非标准模式)时,由于缺少DOCTYPE或不触发标准/准标准模式的DOCTYPE而导致该解决方案是否有效。
position:relative;
可以防止浏览器搞乱所有段落的line-height
分配。这种默认行为非常奇怪,让我觉得它是HTML渲染模型中的一个错误。 - serraosayssup sub, sub sup, sup sup, sub sub{font-size:1em !important;}
CSS属性font-variant-position
正在考虑中,可能最终成为解决此问题的答案。截至2017年初,只有Firefox支持它。
.super {
font-variant-position: super;
}
.aftersup {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
.after {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
.a.external:after"可以简化
或者.after {
font-size: 50%;
margin: left;
vertical-align: .7em;
}
使用“字体大小50%” - 50%是什么大小?如果未在定义文本大小的标签之前使用,则可能无法正常工作。
如果使用“font-size:1em;”,则字体大小肯定已设置,无需引用定义链接文本大小的标签,除非将链接文本设置为100%并且上标是该100%的50%。
使用“font-size:1em;”实际上设置了字体大小基线。
如果希望上标字体比链接文本小,请将“vertical-align”大小设置为较小。
如果希望上标字体与链接文本相同大小,请将“vertical-align”大小设置为与字体大小相同。
要与链接文本对齐,需要将“margin”设置为与链接文本相同(左、中、右、两端对齐)。
.text {
font-size: 1em;
margin: left;
}
.aftersup {
font-size: 1em;
margin: left;
vertical-align: .7em;
}
<p class="text"><a href="url">https://dev59.com/u3RB5IYBdhLWcg3wz6ad</a><aftersup>+</aftersup></p>
或者
<p class="text"><a href="url">https://dev59.com/u3RB5IYBdhLWcg3wz6ad</a><aftersup>You got this</aftersup></p>
或者
<a href="url">https://dev59.com/u3RB5IYBdhLWcg3wz6ad</a><aftersup>+</aftersup>
或者
<a href="url">https://dev59.com/u3RB5IYBdhLWcg3wz6ad<aftersup>You got this</aftersup>
就像......
或者
如何在CSS中制作上标?你成功了
content
允许HTML,那么关注点分离将会受到影响。 - Eva