是否可以使用CSS设置单个单词的背景颜色？

Question

我试图重现这种效果：

h1 span { 
 
    background: #000; 
 
    color: #fff; 
 
    padding: 0 4px; 
 
}

<h1> 
 
    <span>This</span> 
 
    <span>is</span> 
 
    <span>Life</span> 
 
</h1>

然而，该项目我的工作，就是要在CMS使用，我不能指望我的客户知道如何添加span标签（特别是因为它需要在实际网站上使用一个类）。所以我想知道是否有可能重新创建这种效果而不用将每个单词分解为单独的元素。我已经知道这可以通过JavaScript来实现，我正在专门寻找仅用于CSS的解决方案。

Answer 1

您可能要考虑的一件事是nth-child，如果您想按特定顺序设置单词的样式。但是，如果你想根据单词本身来设计风格，不，你不能只用CSS来完成。

Answer 2

您可以使用JavaScript为您做到这一点，并将文件添加到您的客户的网站。

String.prototype.replaceAll = function(search, replacement) { 
 
    var target = this; 
 
    return target.replace(new RegExp(search, 'g'), replacement); 
 
}; 
 

 

 
var str = $("h1").html(); 
 
var re = /[^\s]/; 
 
var subst = '<span>$&</span>'; 
 

 
var result = str.replaceAll(re, subst); 
 

 
$("h1").html(result);

h1 span { 
 
    background: #000; 
 
    color: #fff; 
 
    padding: 0 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<h1>hello there !.</h1>

裁判：

adding tag by regular expression replace

replace all