Как сделать засветление для длинной строки текста c помощью css?

Question

[Fyodor]

Есть данные в таблице

название страны, название курорта, название отеля

у таблицы фиксированная ширина столбцов. некоторые названия получаются длинные и в ширину не вмещаются.

Что собственно хочу - чтобы длинная строка как бы засветлялась при подходе к краю столбца. но при этом при наведении на эту ячейку чтобы можно было увидеть всю строку полностью. в идеале без js обойтись...

Answer 1

[Андрей]

Затухание текста на 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;
}

Answer 2

[Rad1calDreamer]

можно попробовать со свойством text-overflow поиграть. Может и получится