为什么使用我的自定义颜色渐变CSS类的文本不能在手机上正确显示

Question

可见问题：http://stage.herotheapp.com/brand-assets
在上看到的问题：响应式/移动视图

我最近在一个论坛上添加了一个CSS类，可以将文本颜色更改为四点渐变。

颜色渐变效果很好，但它破坏了文本其余部分的行为。在手机上最明显-文本换行不干净(如果有的话(，行高与主题h1/h2/h3等预设不一致，通常难以辨认。

在一个完美的世界里，我只想要渐变颜色覆盖，就像使用规则一样，让其他文本设置应用全局主题/元素或文本样式，但我找不到渐变的规则。

我试过分词和换行规则，但都不起作用。

以下是应用的CSS：

.rainbowtxt {
background-image: -webkit-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For Chrome and Safari */
background-image:    -moz-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For old Fx (3.6 to 15) */
background-image:     -ms-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For pre-releases of IE 10*/
background-image:      -o-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For old Opera (11.1 to 12.0) */
background-image:         linear-gradient(to right, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* Standard syntax; must be last */
color:transparent;
-webkit-background-clip: text;
background-clip: text;
word-wrap:break-all;
overflow-wrap: inherit;
}

这可能是一个简单的解决方案，但不幸的是，超出了我的WP技能范围。

Answer 1

这与WordPress无关。linear-gradient()是一个创建渐变图像的css属性，我们将其与background-clip属性相结合，以将其屏蔽为文本。最后，我们将字体颜色更改为透明，以显示渐变图像。这些是将文本更改为渐变色所需的唯一属性。

• linear-gradient()具有全面支持，不需要浏览器前缀(例如：-webkit-、-moz-、-ms-…(
• background-clip具有全面支持，但需要-webkit-前缀才能在所有基于webkit引擎的浏览器上获得支持。(全部位于Firefox和Edge旁边(

.🌈,
.rainbow {
background: linear-gradient(to left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f)!important;
background-clip: text!important;
-webkit-background-clip: text!important;
color: transparent!important;
}

<h1 class="🌈 rainbow">Lorem Ipsum Dolor</h1>