文字渐变：跨浏览器换行文字答案

【问题标题】：Text gradient: cross-browser wrap text文字渐变：跨浏览器换行文字
【发布时间】：2018-10-09 13:54:47
【问题描述】：

1。总结

渐变文本在 Firefox 中成功换行，但在其他浏览器中却没有。

2。要求

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

火狐
铬
野生动物园
歌剧

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：

5。非预期行为

macOS High Sierra、Safari 11：

三星 Galaxy S8、Android Nougat、Chrome 63：

iPhoneX，iOS and Safari11：

6。没有帮助

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

6.1。前缀

不同的前缀，如this answer。

6.2。 CSS 包装

overflow-wrap、word-break、word-wrap 如this article：

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>

【问题讨论】：

我无法对此进行测试，但我总是尝试一件事，如果不同的分词和换行不起作用，那就是“空白”属性。
@wazz：状态：对我仍然不起作用 | 重现步骤：我尝试在我的问题all values of white-space property 的 3 项中添加代码。 测试环境：macOS High Sierra、Safari 11。谢谢。

标签： javascript jquery css linear-gradients

【解决方案1】：

这是解决方法：

-webkit-box-decoration-break: clone;

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

西蒙

【讨论】：