Question

1。摘要

Gradiented text在Firefox中为我排队成功，但在其他浏览器中没有。

2。要求

我需要的是，文本渐变成功最新的是2018年4月版的这些桌面和移动浏览器：

火狐
铬
Safari浏览器
戏

Internet Explorer和Opera Mini支持不是强制性的。

任何CSS或JavaScript / JQuery方法都适合我。

3。实施例

示例：我需要，逐行文本Suricate: Sacagawea: Blitz/Supeblitz/Brain Ring文本换行。

my code：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>
            Document
        </title>
        <style>
        em {
        	background-image: -webkit-gradient(linear, left top, right top, from(red), to(black));
        	background-image: linear-gradient(to right, red, black);
        	-webkit-background-clip: text;
        	color: transparent;
        	font-size: 5rem;
        }
                </style>
    </head>
    <body>
        <em>
            Suricate: Sacagawea: Blitz/Supeblitz/Brain Ring
        </em>
    </body>
</html>

4。预期的行为

（我使用BrowserStack进行跨浏览器测试）

三星Galaxy S8，Android Nougat，Firefox 51：

Firefox

5。非预期行为

macOS High Sierra，Safari 11：

macOS Safari

三星Galaxy S8，Android Nougat，Chrome 63：

Chrome

IPhoneX，iOS and Safari 11：

iOS Safari

6。没帮忙

在所有情况下，我都会在非预期行为部分中获得行为。

6.1。前缀

this answer中的不同前缀。

6.2。 CSS包装

this article中的

overflow-wrap，word-break，word-wrap：

em {

  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;

}

6.3。 Gradient.Text.js

与this article中一样：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>
            Document
        </title>
        <style>
        	em {
        		font-size: 5rem;
        	}
        </style>
        <script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
		<script src="//cdn.jsdelivr.net/npm/gradient-text/dist/jquery.gradient.text.min.js"></script>
    </head>
    <body>
    	<em class="gradient-text"
	      data-gradient-text-range="#f00, #000">Suricate: Sacagawea: Blitz/Supeblitz/Brain Ring</em>
    </body>
</html>

Answer 1

这是修复：

-webkit-box-decoration-break: clone;

当我发现这个时，我几乎高兴得哭了起来。

西蒙

文本渐变：跨浏览器换行文本