是否可以使用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