Javascript 带背景剪辑的内联元素：文本；狩猎

它通过

背景剪辑：文本在Safari浏览器中连接以实现内联元素（图1）的渐变色文本。当将显示更改为
inline block
或
block
时，似乎可以，但我更喜欢内联效果


我想知道如何才能实现与Chrome相同的视觉效果（图2）


以下是代码，如有任何帮助，将不胜感激：）

从“React”导入React；
导入“./demo.css”
常量演示=（）=>{
返回(
当雨打在你脸上，整个世界都在为你着想的时候，我可以给你一个温暖的拥抱，让你感受到我的爱，让你感受到我的爱。
);
}
导出默认演示；

/*demo.css*/
.集装箱{
宽度：200px；
利润率：20px；
边框：1px纯红；
}
.文本{
字体大小：16px；
}
.亮点{
字体大小：粗体；
背景图像：线性梯度（30度，红色，蓝色）；
背景剪辑：文本；
颜色：透明；
}
使用“显示：内联”；和-webkit盒装饰中断：克隆；
像这样

.test {
    display: inline;
    background-image: linear-gradient(30deg, red, blue);;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
}
<div>
  <p class="test">The background extends behind the border.</p>
<div>

.test{
显示：内联；
背景图像：线性梯度（30度，红色，蓝色）；；
背景剪辑：文本；
-webkit背景剪辑：文本；
颜色：透明；
-webkit盒装饰中断：克隆；
}
背景延伸到边界后面