One day I ran into the trouble of having labes too long for the space they should go into.

In this special case I had a navigation area with a width of 150 pixel but the strings that had to go into the navigation where much longer.

So I decided that shortening the Labels by replacing the middle part by a ‘…’ would do the trick.

Here is the code for it.

fitText : function(element){
    cn=element.childNodes;     
    node=document.createElement('div');     
    node.setStyle({'float':'left',visibility:'visible','font-weight':700});
    document.body.appendChild(node);
    for(var i=0;i<cn.length;i++){
        if(cn[i].nodeType != Node.TEXT_NODE){
            continue;
        }
        origText=cn[i].data;
        text=cn[i].data.trim();
        if ( text == ''){
            continue;
        }         
        wo=element.getInnerWidth();         
	counter=0;         
	fits=true;         
	do{
            mid=Math.ceil(text.length/2);
            text1=text.substring(0,mid-counter);
            text2=text.substring(mid+counter);
            text=text1+text2;
            newText=text1+'...'+text2;
            tn=document.createTextNode(newText); 
            node.appendChild(tn);
            w=node.getInnerWidth();
            if (w>wo){ 
                fits=false;
            }
            node.removeChild(tn);
            counter++;
        } while((w>wo)&&(text.length>0))
        if ( ! fits ){
            cn[i].replaceData(0,origText.length,newText);
            element.setAttribute('title',origText);
        }
    }
    document.body.removeChild(node);
    return true; 
} 

This code requires the Prototype API.

And I believe that there are a lot of possibilities to improve that bit of JavaScript.