我正在為我的項目創建一個設計主題。為此，我使用Webkit文本漸變來為多行文本應用漸變顏色。我想擴展/拉伸漸變到父元素的整個高度。 但是文本漸變只有在文本節點是漸變元素的直接子元素時才起作用。如果我在父元素中使用多個子元素，漸變就不起作用了。

為了給文本添加一些其他功能，我必須使用子元素作為包裝器。所以每一行都有自己的包裝元素。

我能做些什么來使它工作？

示例代碼:

#container span {
  background: -webkit-repeating-linear-gradient(top, #ff0000, #0000ff) !important;
  /* This background gradient might be move to `#container` style below? */  
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: bold;
  font-family: Arial;
  display: inline-block;
  font-size: 50px;
  
}
#container {
    width: 640px;
    background: black;
    /* background property should work with gradient */ 
    /* background: -webkit-repeating-linear-gradient(top, #ff0000, #0000ff) !important; */  
}

<div id="container">
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
  <span>This is a one line long text.</span>
</div>

示例代碼js fiddle:https://codepen.io/nishitbhatt/pen/ZEmQyEp

一個子元素的工作文本漸變的js fiddle:https://codepen.io/nishitbhatt/pen/PoxZjZg