Implementation of ellipse in best way using javascript and jQuery

Posted By : Panaru Chaudhary | 17-Sep-2017

Introduction :

Ellipse methology is strongly used in UI desigining now days, so I am going to tell you how to implement ellipse in best way using java script and jQuery.

Brief Description With Example :

As you see below example have method name ellipse accepting four parameter where first parameter

is element in which pass element object like this ( documnt.getElementById('elementName') or jQuery("#elementName") ),

Second parameter text will accept that text to going make ellipse like this ( "Hello India , this is great country " ) to make like

this ("Hello India..."), third parameter is width will accept element's width to make ellipsable according this width .

		ellipse : function( element, text, width, useAcronym )
		{
		   if ( ! text  ||  $JQ(element).length == 0) return;
		   var element = $JQ( element );
		   var showAcronym = ( typeof useAcronym == 'undefined' || useAcronym );
		   if( navigator.userAgent.indexOf("MSIE") >= 0 )
		   {
		   	var classes = $JQ(element).prop('class');
		   	if( $JQ(classes).length > 0 )
		   		classes +=  ' ';
		   	classes += 'ellipsis';
		   	$JQ(element).addClass(classes);
		   	if( showAcronym )
		   	{
		   		if( $JQ(element).prop('tagName') == 'div' || $JQ(element).prop('tagName') == 'span' )
		   			$JQ(element).prop('title',text.replace(stripTags,''));
		   	}
		   }

		   var ellipsisSpanId = 'ellipsisSpan_' + Math.random();
		   $JQ(element).html('' + text + '');
		   var inSpan = document.getElementById( ellipsisSpanId );
		   if (inSpan.offsetWidth > width)
		   {
		      var i = 1;
		      inSpan.innerHTML = '';
		      while(inSpan.offsetWidth < (width) && i