Simplest way to truncate string w/jQuery

Question

I have a page that is currently utilizing a jQuery plug-in for truncating text string based on a width provided. While the string is truncated and ends with "..." the full string is placed inside TITLE of the element.

Normally it works great, however, I noticed a case where a page has too many strings, close to 100, and my page starts crashing, complaining that the script stopped responding.

Is there a simpler way to truncate? I'm OK use approximate width, perhaps switching to a character count?

I'd love it if this could be accomplished with just a few lines of code.

Can something like this be done?

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

They are called ellipsis. I would suggest you to go for css rather than using JavaScript.

Something like this.

.ellipsis {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -moz-binding:url('ellipsis.xml');
}

Where ellipsis.xml contains

<?xml version="1.0"?>
<bindings 
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
     <binding id="ellipsis">
        <content>
           <xul:window>
              <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
           </xul:window>
        </content>
     </binding>
</bindings>

Also for browsers like FF(4 to 7) which do not support ellipsis there are workarounds to achieve this.

You can take a look at this link for FF workarounds text-overflow:ellipsis in Firefox 4? (and FF5)

edited May 23 '17 at 12:12

Community

1
1

answered Feb 28 '12 at 16:03

ShankarSangoli

69,612
13
93
124

But this will add ellipsis to all strings, right? Some of my strings are shorter than the space allocated. – santa Feb 28 '12 at 16:11
It will apply based on the width of the container on which it is applied. If the string is short enough to fit in it then it will not show ellipsis. – ShankarSangoli Feb 28 '12 at 16:15
I don't see a width in the class. Where would I specify it? Are there any examples that I can take a look at? – santa Feb 28 '12 at 16:38
@santa - Take a look at this link http://www.visibilityinherit.com/code/ellipsis.php. There are coupld of demos. – ShankarSangoli Feb 28 '12 at 16:45
Won't it cut in the middle of a letter, if the width limit is reached? – santa Feb 28 '12 at 23:42
It will show `...` if it cuts in the middle of a word. What do you expect? – ShankarSangoli Feb 28 '12 at 23:44
I did not mean in the middle of a work. It will cut in the middle of any letter. – santa Feb 28 '12 at 23:47
You can try and see it will not. – ShankarSangoli Feb 28 '12 at 23:48
OK, I'm willing to try. But what's in ellipsis.xml? Where do I get it? – santa Feb 28 '12 at 23:57
Thanks. I am testing. Oddly enough I can't apply the class to the . In order for it to work I have to wrap string with the
. Regardless, I think this is going to be a lot faster than running each through jQuery plugin. Thanks for the suggestion!
– santa Feb 29 '12 at 03:40

Simplest way to truncate string w/jQuery

1 Answers1