<!doctype HTML>
<html>
<head>
<style>
div {
background-image: linear-gradient(green, red);
background-clip: text;
width: 150px;
color:transparent;
overflow: hidden;
opacity:0.5;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
<span stype="font-size: 30px;">
ALongLongLongLongLongLongLongLongLongLongLongLongString
</span>
</div>
</body>
</html>