如何将样式应用于页面中的单个特殊 HTML 字符答案

【问题标题】：How to apply a style to a single special HTML character across the page如何将样式应用于页面中的单个特殊 HTML 字符
【发布时间】：2012-06-06 03:49:13
【问题描述】：

我们有一位客户希望在其网站上为“注册商标”(®) 字符添加上标。

该网站是基于 CMS 的，他们不仅无法始终如一地使用上标字符，而且上标样式也无法传递到任何 CMS 生成的页面标题等。

我想知道实现这一目标的可能/最佳方法是什么：

能否使用 CSS 将样式应用于特定的特殊字符？
使用 jQuery 应用样式发布页面加载。
扩展模板解析引擎（Silverstripe）

感谢任何想法。

【问题讨论】：

标签： html css special-characters silverstripe

【解决方案1】：

我不相信只用 CSS 就可以做到。

我会使用 jQuery 来查找 &reg; 内容并将其替换为 &reg;

下面有一个类似的问题，关于如何做到这一点的正确答案（省去了我的麻烦）：

Altering registered symbols (R)

【讨论】：

【解决方案2】：

不幸的是，我认为您不能仅使用 CSS 选择某些字符。

不过……

上标有一个CSS规则，就是：
```
vertical-align: super;
```

这个 jQuery 工作：

$(document).ready(function() {
   $('*').each(function() {
    var n = $(this).html().replace(
        new RegExp('®','g'),
        '<sup>®</sup>'
        ).replace(
        new RegExp('&reg;','g'),
        '<sup>&reg;</sup>'
        );
    $(this).html(n);
  });
});

jsFiddle 示例：http://jsfiddle.net/Fwjd4/

我希望这会有所帮助！

【讨论】：

嗨 - 我正在使用 wordpress，我必须将此 Jquery 代码添加到哪个文件？

【解决方案3】：

我不认为你可以单独使用 css 来做到这一点
使用 jquery/javascript/css，您可以创建一个包含字符样式信息的类，然后让 jquery 解析文件部分并将字符包装在  标记中，并应用该 css 类
我对 silverstripe 一无所知，因此无法评论它的用法

【讨论】：

【解决方案4】：

严格来说，您不能使用任何单个 CSS 属性创建“超级脚本”（有 veritcal-align “超级”，但它不会改变字符的大小或样式，只是它相对于文本基线的位置)。不过，有一些方法可以成功地实现这一点，我之前尝试过。

首先，正如其他两张海报所提到的，您需要以某种方式定位该符号。如果您可以用标记包装所有&reg; 字符，那么其余的都可以使用CSS 轻松完成。例如：

当您拥有&reg; 时，您只需将这些样式添加到您的样式表即可获得所需的效果：

<div>
<p>This is some crazy text brought to you by my Company<sup>&reg;</sup><p>
<div>

div{
 background:#000;
 width:80%;
 height:80%;
 padding:10% 10%;    
}
p{
 background:#4d4d4d;
 padding:10% 20%;    
 color:#fff;
 font-family:Arial-black,Arial,sans-serif;
 font-size:2em;
}
sup{
 position:relative;
 font-size:.75em;
}

这是一个例子：http://jsfiddle.net/jglovier/vqHuu/

当然，如果您不能像这样访问标记，则需要使用 jQuery 来查找字符并将它们包装在  标记中，就像其他人建议的那样。

【讨论】：

【解决方案5】：

在 PHP 代码中，您可以将其放入您的 Page 类中，以便在服务器端执行您想要的操作：

function Content() {
  return str_replace('®', '<sup class="copyright">®</sup>', $this->Content);
}

模板引擎中的$Content 将首先查找$page->Content()（方法），如果不存在则查找$page->Content。相比之下，CMS 编辑器只查找$page->Content。这意味着通过定义处理输出的 Content() 方法，您可以包含仅在模板显示上执行且不会与 CMS 混淆的代码。

【讨论】：