Question

我有一个场景，我需要为其中一个产品添加上标。假设它是abc9。我需要在abc和9之间标注R.

为此，我需要分词，并通过JS编号。我也希望只有当页面高度为800px时才显示。

Answer 1

为什么需要使用JavaScript？据我了解，这是一个内容/风格问题，所以HTML和CSS是你的朋友：

＆＃34;正确＆＃34;回答这里真的取决于上标字母与页面内容的关系。这封信是上标的事实是意思，还是只是文体？每个规则都有它的例外，但是当给出选择时，HTML应该是语义的，并且有一个HTML元素可能与此相关：

The HTML Superscript Element（）定义了应该显示的文本范围，出于排版的原因，比文本的主要范围更高，通常更小。

如果您的上标表示某种含义，请使用元素。

如果它只是产品名称的程式化部分，那么使用CSS。对于使用CSS，有很多方法，但我个人使用相对定位，如下所示：

span.sup {
    position: relative;
    font-size: 0.6em;
    bottom: 0.5em;
}

有关不同上标方法的利弊的更深入讨论，请参阅Superscript in CSS only?

至于只为某些屏幕高度显示上标文本，您再次不需要JavaScript，实际上可以更轻松地使用CSS media queries：

span.sup, sup {
    display: none;
}

@media (min-height: 800px) {
    span.sup, sup {
        display: inline;
    }
}

当浏览器视口的高度为＆gt; = 800px时，媒体查询规则将启动并显示上标文本。

最终，用法只是将或应用于字母＆＃34; R＆＃34;已经在标记中：

abcR9