Home/ Questions/Q 7761431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T14:08:02+00:00

Here is the problem: I have a list of items with various length for

  • 0

Here is the problem:

  • I have a list of items with various length for then name.
  • I want to trim the names to 140 pixels if they are longer.
  • As a nice clean way
    of demonstrating to users that the string is trimmed, I want to
    reduce transparency of the last few characters of the name, or at
    least create that illusion.
  • I do not want to use the ellipsis… effect for several good reasons.

I this possible in pure CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sure can, using CSS. You have two options, but really only the first will get the best results cross-browser.

    The idea is to overlay a pseudo-element over the right of your element containing the string. This will only work if it’s on a solid background color, as we will use that color to “fade” to.

    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 */
}

    the :after element will work in all browsers, IE8+. The -ms-gradient only in IE10+, so either figure out how to use the old ie gradient filters, or use a PNG image.

    There’s also another newer CSS method, but currently only supported by webkit (Chrome & Safari), mask-image. Here, you can use an image or a CSS gradient to mask an element. Same principal, except you can actually fade the element (in the case your text was on a patter).

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

    You can check out this jsfiddle: http://jsfiddle.net/rgthree/b96sv/

    • 0