0

ここに問題があります：

  • 当時の名前のさまざまな長さのアイテムのリストがあります。
  • 名前が長い場合は、名前を140ピクセルにトリミングしたいと思います。
  • 文字列がトリミングされていることをユーザーに示すための優れたクリーンな方法として、名前の最後の数文字の透明度を下げるか、少なくともそのような錯覚を作成したいと思います。
  • いくつかの理由から、省略記号...効果を使用したくありません。

これは純粋なCSSで可能ですか？

4

2 に答える 2

1

確かに、CSSを使用できます。2つのオプションがありますが、実際には最初のオプションだけがクロスブラウザーで最良の結果を得ることができます。

アイデアは、文字列を含む要素の右側に疑似要素をオーバーレイすることです。これは、背景色が無地の場合にのみ機能します。これは、その色を使用して「フェード」するためです。

HTML

<span>This string ends with an gradient to the background color overlayed</span>

CSS

span {position:relative;}
span.overlay:after {
    content:"\0020";
    display:block; width:50px; 
    position:absolute; right:0px; top:0px; bottom:0px; z-index:2;
    background-image:-webkit-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image:-moz-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image:-ms-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image:-o-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image:linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
    /* Or use an actual png image fading to white for IE < 10 support */
}

この:after要素は、IE8+のすべてのブラウザで機能します。IE10 +でのみ使用できるため、古いグラデーションフィルターの-ms-gradient使用方法を理解するか、PNG画像を使用してください。

別の新しいCSSメソッドもありますが、 現在はWebkit（ChromeとSafari）でのみサポートされてい mask-imageます。ここでは、画像またはCSSグラデーションを使用して要素をマスクできます。要素を実際にフェードできることを除いて、同じプリンシパル（テキストがパターン上にあった場合）。

span{
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 50px);
}

あなたはこのjsfiddleをチェックアウトすることができます：http：//jsfiddle.net/rgthree/b96sv/

于 2012-04-05T22:17:48.540 に答える
0

はい、これは可能ですが、末尾の各文字をaでラップし、それぞれ<SPAN>のCSS不透明度を設定する必要があります。

于 2012-04-05T20:15:04.343 に答える