是否可以僅使用CSS為單個單詞設置背景顏色？

Question

我正在嘗試重新創建此效果：

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

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

但是，我正在工作的項目打算在CMS上使用，而且我不能指望客戶知道如何添加跨度標簽（特別是因為它將需要在實際站點上使用類）。 所以我想知道是否有可能在不將每個單詞分解成一個單獨的元素的情況下重新產生這種效果。 我已經知道可以通過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> 

參考：

通過正則表達式添加標簽

全部替換