1. Summary
Gradiented text successful wrap by lines for me in Firefox, but not in another browsers.
2. Requirements
I need, that text gradient successful works in latest at April 2018 versions of these desktop and mobile browsers:
- Firefox
- Chrome
- Safari
- Opera
Internet Explorer and Opera Mini support not obligatory.
Any CSS or JavaScript/JQuery method will be suitable for me.
3. Example
Example: I need, that gradiented text Suricate: Sacagawea: Blitz/Supeblitz/Brain Ring text wrap by lines.
<!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. Expected behavior
(I use BrowserStack for cross-browser testing)
- Samsung Galaxy S8, Android Nougat, Firefox 51:
5. Non-expected behavior
- macOS High Sierra, Safari 11:
- Samsung Galaxy S8, Android Nougat, Chrome 63:
- IPhoneX, iOS and Safari 11:
6. Not helped
In all cases I get behavior as in Non-expected behavior section.
6.1. Prefixes
Different prefixes as in this answer.
6.2. CSS wrapping
overflow-wrap, word-break, word-wrap as in 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
As in 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>
