jquery - jquerycss3を使用したテキストのFadeOut最後の文字

Question

私は、テキスト文字列の最後の制限文字をフェードアウトするためのこのアイデアを持っています。

例 ：

出来ますか？jquery/を使用してこれを作成する方法を知っている人はいますCSS3か？

Answer 1

jQueryを介しtext-overflow: ellipsisて要素に追加し、透明なグラデーションの背景を追加することができます-DEMO<span>

p {
    text-overflow: ellipsis;
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    margin: 25px 0;
} 

span {
    display: inline-block;
    height: 20px; 
    width: 50px;
    background: red;
    position: absolute;
    left: 85px;

    background: -moz-linear-gradient(right,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, right top, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0),rgba(255,255,255,1)); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,1) 100%,rgba(255,255,255,0) 0%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
​

Answer 2

これにはCSSを使用することを強くお勧めしtext-overflow:ellipsisます。これは、この種のことを行うための標準的な方法です。

Firefoxがまだバージョン3.6であった当時、Firefoxはサポートしていなかったのでellipsis、別の解決策を考え出す必要がありました。当時の私の解決策は、まさにあなたがここで提案していることであり、行の終わりでフェードアウトしました。

テキストの背景に合わせて、透明から単色にフェードするグラデーションの背景を持つ、関連する要素の上に追加の要素を配置することで、これを実現しました。このグラデーションはCSSを使用して実現できますが、古いバージョンのIEをサポートする必要があったため（当時はCSS3Pieが存在しなかったため）、グラデーション効果の代わりに実際にはPNG画像を使用しました。ただし、どちらの方法でも同じ違いがあります。

これのプラス面は、それが機能し、テキストの見栄えの良いフェードアウト効果を与えてくれたことです。

欠点は、（1）テキストの選択でユーザーに問題が発生したこと、（2）背景が単純な単色でない場合はひどく見えること、（3）ellipsis解決策が非常に単純な場合に余分な作業が追加されたことです。 。

ほとんどのFirefoxユーザーがをサポートするバージョンにアップグレードされるとすぐにコードを削除したため、コードを表示できませんellipsis。

Answer 3

CSS3text-overflowプロパティを試すことができます：

.test {
    text-overflow: ellipsis;
} 

Answer 4

これ以上の方法は考えられません。

<span>test test test test</span><span style="opacity: 0.50; "> fading.</span><span style="opacity: 0.40; ">.</span><span style="opacity: 0.20; ">.</span><span style="opacity: 0.10; ">.</span>​​​​​​​​​​

jsFiddle： http: //jsfiddle.net/DLbBZ/

これはjQueryの回避策ですが、すでに答えはあります：P

http://jsfiddle.net/sXNQF/