Question

如果我有以下字符串：John Smith，我如何使用CSS在第二个单词上设置font-weight: bold以实现：John Smith 。

这可以在纯CSS中完成吗？

更新：我正在从服务器检索用户名，因此在我的模板中它是#{user.profile.name}。

Answer 1

由于提出了js解决方案，目前无法使用纯CSS： Live demo (click).

示例加价：

<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">This guy and stuff.</p>

<强> JavaScript的：

var toBold = document.getElementsByClassName('bold-second-word');
for (var i=0; i<toBold.length; ++i) {
  boldSecondWord(toBold[i]);
}

function boldSecondWord(elem) {
  elem.innerHTML = elem.textContent.replace(/\w+ (\w+)/, function(s, c) {
    return s.replace(c, '<b>'+c+'</b>');
  });
}

Answer 2

对不起，它不能在纯CSS中完成。但是，如果您愿意接受JavaScript修复，那么您可能希望查看类似这样的内容：

在元素textContent中找到第二个单词的开始和结束索引。
将contenteditable属性添加到元素。
使用Selection API选择该范围。
将execCommand与bold命令一起使用。
删除contenteditable属性。

编辑:(刚看到你的编辑）我同意这对于大多数用途来说有点过于苛刻。也许你最好将姓氏保存为元数据？

如何将CSS应用于字符串中的第二个单词？

2 个答案: