Question

我试图重新创造这种效果：

＆＃13;

uint16_t

＆＃13;

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

＆＃13;

但是，我正在工作的项目是用于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

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

2 个答案: