Fade out the end of lines of text labels that don't fit (instead of truncating)

Question

I’m not sure that “fading” is the right term to use, since it seems to refer very much to the animation effect, but what I would like to achieve can be seen in the address bar of the iPhone Safari Application. When the URL is too long to display, the end of the line "disappears" rather than being truncated by "...".

I thought this could be easily done by changing the Line Breaks parameter from “Truncate Tail” to “Clip” in the XIB file and then using the image with transparency to create an effect. But the setting for the “Clip” seems to be pinched at the end of the word, and not in the middle of the word or even in the middle of the letter, as seen in Safari or Chrome for the iPhone. This does not work for me, and in fact it seems that the text is complete when, upon closer inspection, the user notices that the text does not make sense.

What is the best way to fade out lines that don't fit in text labels? Thanks in advance.

Answer 1

Take a look at the Google Toolbox for Mac GTMFadeTruncatingLabel , which is a reusable component that does just that.

Answer 2

You can also use a combination of the category found here: ( fooobar.com/questions/83532 / ... ) and the gradient.

And do:

if([myLabel isTruncated]){ CAGradientLayer *l = [CAGradientLayer layer]; l.frame = myLabel.bounds; l.colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor]; l.startPoint = CGPointMake(1.f, .1f); l.endPoint = CGPointMake(0.95f, 1.0f); myLabel.layer.mask = l; } 

This works on iOS 7 and iOS8.