При длином тексте, затухание

[xkspy]

Нужен такой эффект css как и в Яндекс.Почте, точнее при достижение n-максимума длины текста, происходила бы затухание текста.

P.S. Желательно, чтобы при наведение на текст, если он длинный, сам текст бы как бегущая строка двигался, чтобы увидеть полностью текст

 

[lexxxter]

подобная идея реализована здесь:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

только там вертикальное применение, переделать в горизонтальное несложно

 

[xkspy]

Да, это градиент на весь текст, но мне нужно чтобы грдиент применялся при достижения определёного максимума букв, т.е. чтобы буквы перед границей получали весь этот эффект, а не весь текст, как Вашем варинте.

Как видно, в Яндекс почте, заголовок длинее чем на самом деле и при этом используется эффект градиента, мне аналогично нужно, т.к. у меня тоже много заголовков которые длинее самой длины таблицы, за которую он заходит.

 

[mittus]

css:
.myClass {background:url(...) repeat-y right;z-index:10;}
.myClass2 {white-space:nowrap;z-index:1;}
и хтмл:
<div class="myClass"><span class="myClass2">здесь текст</span></div>

url(...) - картинка шириной в n пикселей и высотой 1 пиксель, прозрачный png-24.

 

[xkspy]

картинка шириной в n пикселей и высотой 1 пиксель, прозрачный png-24.

Картинка прозрачная или полупрозрачная с переходящим градиентом белого?

 

[UDAV]

Картинка прозрачная или полупрозрачная с переходящим градиентом белого?

полупрозрачная с переходящим градиентом белого

только в данном примере не будет такого эффекта как в первом сообщении. Будет просто последние буквы закрашиваться.

 

[xkspy]

Значит этот эффект не подойдёт при достижение определённого максимума, идёт затухание.
Как же организовать как на почте в Яндексе?

 

[UDAV]

Значит этот эффект не подойдёт при достижение определённого максимума, идёт затухание.
Как же организовать как на почте в Яндексе?

Через php

$tema = 'Проверка длинного сообщения траляля оочень длинное сообщениеhhh';
if (strlen($tema) >= 20) {echo '<div class="myClass"><span class="myClass2">'.substr($tema,0,25).'</span></div>';}
else {echo $tema;}

Если переменная содержит больше 20 символов, то выполняется код, который делает затухание и при этом строка обрезается до 25 символов.

 

[xkspy]

Нашёл ещё вот такой вариант Для просмотра ссылки Войди или Зарегистрируйся без градиента, но эффектно, сам определяет размер и ставит "..."

 

[UDAV]

Нашёл ещё вот такой вариант без градиента, но эффектно, сам определяет размер и ставит "..."

Интересно... на одном css без js даже
А градиент туда уже и без проблем можно подставить в css -)