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

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

这可以在纯CSS中完成吗？

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

来源

2014-01-24 Sahat Yalkabov

都能跟得上：（http://css-tricks.com/a-call- for-nth-everything/ – m59

@KrishR我认为他们希望这样做是自动完成的。它有一个css标签。 – rvighne

没办法用纯CSS来做到这一点，我担心，但如果你不介意使用一点JavaScript，你可以尝试如下所示：http://jsfiddle.net/tewathia/p5g5b/ – tewathia

由于一个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>'); 
    }); 
}

来源

2014-01-24 04:31:43 m59

好吧，我已经得到了更好的解决方案，我必须承认。但它*是*是/否问题... – rvighne

@rvighne谢谢。 – m59

它不能在纯CSS中完成，对不起。但是，如果你愿意接受一个JavaScript修复，那么你可能要考虑这样的事情：

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

编辑:(只看到你的编辑）我同意这对大多数用途来说有点太黑客-Y。也许你最好将元数据保存为元数据？

来源

2014-01-24 04:23:22 rvighne

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

回答

相关问题