Fade out end of text label strings that don't fit (instead of truncate)

Question

I'm not sure if "fade out" is the correct term to use, as it seems to refer to the animation effect a lot, but what I'd like to achieve can be seen in the address bar of the iPhone Safari app. When a URL is too long to display, the end of the string "faded out" rather than truncated with "...".

I thought this could be easily done by changing the Line Breaks setting from "Truncate Tail" to "Clip" in the XIB file and then using an image with transparency to create the effect. But setting to "Clip" seems to clip at the end of a word, rather than the middle of a word, or the middle of a letter even, as seen in Safari or Chrome for iPhone. This doesn't quite work for me, and it actually gives the impression that the text is complete, when upon closer inspection, the user will notice that the text doesn't make sense.

What's the best way to "fade out" strings 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 exactly this.