Support for middle ellipsis would be staggering

[adriaandotcom]

There are some libraries for middle ellipsis for Vue 2, would be lit if vue-clamp would support middle ellipsis as well.

• https://github.com/hyjiacan/vue-ellipsis (demo)
• https://github.com/tardigrada777/vue-text-middle-ellipsis

[adriaandotcom]

It's here: https://github.com/Justineo/vue-clamp/pull/66

@Justineo Could you take a look?

[Justineo]

Thank you for your PR! Can you elaborate on the use case of this? Is middle ellipsis common practice in English?

[zack-pronto]

We would love this too. Here's a W3C proposal for this very feature. Here's a react library that supports it. The middle ellipsis is a common UI feature on MacOS and iOS for Apple devices. It's a built-in feature in Swift. Here's a long stackoverflow post asking how to do it which shows the interest level in the JS community for this type of middle-ellipsis functionality.

As you can see, there's definitely a number of use cases where this is handy. Our specific use case is truncating very long file names. Seeing the start of the file name is helpful, but we also want users to be able to see the end of the file name because that's where the file extension is. So we want something like this:

Anyway, we would love to see this PR approved and merged. 👍

[wrinkleydog]

I too would love to see this addition to vue-clamp. As mentioned above, file names are one place I'd use the middle ellipsis. But we also use them when truncating longer URLs.

Example: https://stackoverflow.com/questions/831552/ellipsis-in-the-middle-of-a-text-mac-style https://stackoverflow.com/questions/831528/which-method-of-checking-to-see-if-a-nsdictionary-contains-a-particular

Cropping the filenames would appear like so: https://stackoverflow.com/qu... https://stackoverflow.com/qu...

This leaves the 2 URLs being indistinguishable from each other.

If the truncation could be specified to happen in the middle of the word, this would look like: https://stackoverflow.com/qu...a-text-mac-style https://stackoverflow.com/qu...ains-a-particular

This PR would alleviate several headaches for us.

[adriaandotcom]

Thanks for taking a look @Justineo. My use case is an analytics company called Simple Analytics where we show domains and paths of our customers. Extensions are usually important with paths so we use them like this:

Same goes for domains. Customers often have multiple TLDs that all start with the same letters. We for example have:

• simplenalaytics.com
• simplenalaytics.io
• simplenalayticscdn.com

Which when truncated it shouldn't all show simplenalaytic..., but rather:

• simple...tics.com
• simple...ytics.io
• simple...scdn.com

Do you think this is something you want to offer in vue-clamp?

[Justineo]

@adriaanvanrossum @wrinkleydog @zack-pronto Thank you! I can definitely get the idea now. I'll look into the PR soon.

[Justineo]

Implemented in #66 by @jibsaramnim and released with vue-clamp@0.4.0. Thank you!

[adriaandotcom]

Amazing! ❤️