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

Question

我们有一位客户希望在其网站上标注“注册商标”（®）字符。

该网站CMS基础，不仅有麻烦一贯superscripting字符，但上标造型传达给任何CMS不携带生成的页面标题等

我不知道什么是可能的/他们最好实现此目的的方法：

• CSS可以用于将样式应用于特定的特殊字符吗？
• 使用jQuery应用样式后页加载。
• 扩展模板解析引擎（Silverstripe）

任何想法表示赞赏。

Answer 1

我不相信它，可以单独用CSS来进行评论。

我会使用jQuery查找和替换®内容与<sup>&reg;</sup>

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

Altering registered symbols (R)

Answer 2

• 我不认为你可以做到这一点就要孤独
• CSS使用jQuery /使用Javascript/CSS，你可以创建一个包含该字符样式信息然后让jQuery的解析文件部分类和包裹字符内部应用
• <span></span>标签与CSS类我一无所知silverstripe，所以我不能在它的使用

Answer 3

不幸的是，我不认为你可以只选择只有 CSS的某些字符。

但是...

1. 没有为上标一个CSS规则，那就是：

   vertical-align: super; 
   

2. 这个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/

我希望这有助于！

Answer 4

严格来说，你不能用任何单一的CSS属性创建“超级脚本”（有veritcal-align“超级”，但它不会改变字符的大小或风格，只是它相对于文本的位置基线）。但是，有一些方法可以成功完成我之前尝试过的操作。

首先，正如另外两张海报中提到的那样，您需要以某种方式定位符号。如果您可以用标记包装所有®字符，则可以使用CSS轻松完成其余部分。例如：

当你有<sup>&reg;</sup>你可以简单地这些样式添加到您的样式表来获得所需的效果：

<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来查找字符，并按照其他人的建议将它们包装在<sup>标记中。

Answer 5

在PHP代码，你可以把这个到您的网页类做你想做的，在服务器端：

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

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