html - 如何在每个单词中放置渐变而不是在 HTML 中作为一个整体的段落？

Question

我希望特定段落中的每个单词都具有渐变，而不是从段落的一端到另一端的渐变。所以如果我写以下内容:-

p {
  background: -webkit-linear-gradient(#124, #095);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

我得到的是从 para 的一端穿过单词到另一端的渐变。 但我想要的是，para 的每个单词都有一个单独的渐变

编辑:添加片段...

p {
  background: -webkit-linear-gradient(#124, #095);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<p>Bacon ipsum dolor amet prosciutto chicken turkey, pork frankfurter tri-tip shoulder shankle pork belly andouille tongue. Short ribs porchetta sausage brisket picanha, pastrami sirloin salami bresaola filet mignon turkey tri-tip spare ribs. Capicola ham hock filet mignon sirloin, beef ribs rump short ribs. Short loin andouille jowl capicola beef filet mignon alcatra turducken jerky venison.</p>

Answer 1

我认为您唯一的 CSS 选项是像这样非常笨拙的东西。 (这让我想到:您真的需要这种效果来使您的网站对访问者有用吗？)

不过，您可能会发现使用 JS 的解决方案不那么笨重。

span {
  background: -webkit-linear-gradient(#124, #095);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<p><span>Bacon</span> <span>ipsum</span> <span>dolor</span> <span>amet</span> <span>prosciutto</span> <span>chicken</span> <span>turkey,</span> <span>pork</span> <span>frankfurter</span> <span>tri-tip</span> <span>shoulder</span> <span>shankle</span> <span>pork</span> <span>belly.</span> <span>Bacon</span> <span>ipsum</span> <span>dolor</span> <span>amet</span> <span>prosciutto</span> <span>chicken</span> <span>turkey,</span> <span>pork</span> <span>frankfurter</span> <span>tri-tip</span> <span>shoulder</span> <span>shankle</span> <span>pork</span> <span>belly.</span> <span>Bacon</span> <span>ipsum</span> <span>dolor</span> <span>amet</span> <span>prosciutto</span> <span>chicken</span> <span>turkey,</span> <span>pork</span> <span>frankfurter</span> <span>tri-tip</span> <span>shoulder</span> <span>shankle</span> <span>pork</span> <span>belly.</span></p>