Как сделать засветление для длинной строки текста c помощью css?
Затухание текста на CSS3 (habr)
Под ваши требования есть способ проще, не затухание, а text-overflow
https://developer.mozilla.org/en-US/docs/Web/CSS/t...
Решение простое: оборачиваем текст в div.text-overlow, css:.text-overflow {
  white-space: nowrap;
  width: 100%; //ваша ширина                   
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-overflow:hover {
  position: absolute;
  overflow: visible;
}
можно попробовать со свойством text-overflow поиграть. Может и получится