Shorten (Truncate) Text Length with "..."

Hello @Everyone,

Do you guys know of a good working native js script (or jquery or similar) to truncate a text / title length with a specified number of character? Without truncating words (because it’s not readable otherwise).

Example : My long ass title that’s so long it can’t fit to a nice design
Shorten to 30 chars : My long ass title that’s so…

I’d like to be able to apply this rule to any H3 Title with the class “.longtrend” for instance.

Thank you in advance for your help!

In case of you dont know about this simple CSS rule:

And there’s a good read here too:

https://software.intel.com/en-us/html5/hub/blogs/ellipse-my-text/

1 Like

Thanks Vincent,

Actually I just saw your post doing a simple search on the Forum!

It works great, but how do I define how many chars I want before it gets truncated?
Here’s what I have with a 70px width:

What I’d like:

It’s an overflow, so it is defined by the container.

CSS-tricks to the rescue?

1 Like

Yay!!!

Merci Vincent you’re so swift and swag… Or shall I say: Shwifty

I’m going to have to google all that before thinking anything about it… ;-p

awesome. I’ve been looking for something similar. Thanks @vincent

SHWIFTY… ahhh. hm. ok ? PG13 warning.

EDIT… it displayed the text from the site. Replace X with Shwifty
http://www.urbandictionary.com/define.php?term=X

1 Like

LOOOL :smiley: that was unexpected… still laughing

:joy: :joy: … Shwifty. Lets see what these two have to say :point_down:

@AlexManyeki Nailed it.

Definition: (Spoiler alert)

Being Shwifty /shwifty/ (noun) :
Being the world’s best effort. That’s what.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.