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?

Answer 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)