1. Резюме
Градиентный текст успешно переносится по строкам для меня в Firefox, но не в других браузерах.
2. Требования
Мне нужно, чтобы текстовый градиент успешно работал в последних версиях этих настольных и мобильных браузеров, выпущенных в апреле 2018 года:
- Firefox
- Chrome
- Safari
- Opera
Поддержка Internet Explorer и Opera Mini не обязательна.
Для меня подойдет любой метод CSS или JavaScript / JQuery.
3. Пример * * тысяча двадцать пять
Пример: мне нужен этот градиентный текст Suricate: Sacagawea: Blitz/Supeblitz/Brain Ring перенос текста по строкам.
мой код :
<!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 для кросс-браузерного тестирования)
- Samsung Galaxy S8, Android Nougat, Firefox 51:
5. Неожиданное поведение
- macOS High Sierra, Safari 11:
- Samsung Galaxy S8, Android Nougat, Chrome 63:
6. Не помогло
Во всех случаях я получаю поведение, как в Неожиданное поведение section.
6,1. Приставки
Различные префиксы как в этот ответ .
6,2. CSS-упаковка
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
Как и в этой статье :
<!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>