我正在为我的项目创建一个设计主题。为此，我使用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