Ellipsis Solution

A backward compatible ellipsis solution using text-overflow with a fall back script using jquery.

by jacobwsmith

HTML

<ul>
			<li class="ellip">Navigation Element 1</li>
			<li class="ellip">Navigation Element 2 with some long title</li>
			<li class="ellip">Navigation Element 3</li>
		</ul>

CSS

.ellip{
	width: 205px;
	margin: 10px;
	border: 1px solid #cccccc;
	white-space: nowrap;
	overflow: hidden;
	padding:10px;
	text-overflow: ellipsis;
	/* -ms-text-overflow: ellipsis; */
}

JavaScript

// jquery document ready
$(function() {
	
	// define variables
	var s = document.documentElement.style,
	hasto =  'textOverflow' in s || 'OTextOverflow' in s,
	span,
	cwidth;

	// do we have text-overflow capability
	if(!hasto){

		// loop through all YOUR classes that are found
		$('.ellip').each(function(i, obj) {

			// add a span tag so we can measure
			span = document.createElement('span');
			$(span).html($(obj).html());
			$(obj).html(span);
			
			// get the container width
			cwidth = $(obj).width();
			
			// do we have enough space
			if($(span).width() > cwidth){

				// loop through content remove one character and see if we have a fit
				var spanlength = $(span).html().length;
				for(var j=spanlength-1; j > 0; j--){
					$(span).html($(span).html().substr(0, j) + '...');
					if($(span).width()< cwidth){
						break;
					}
				}
			}

		});

	}

});