css and jQuery ellipsis …

Today I learn a new thing css & jQuery ellipsis:

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

Above css not woks in Firefox so the best way is  jQuery script for the same.

<title>CSS3 Text Overflow Test</title>
<script type=”text/javascript” src=”jquery-1.3.1.js”></script>
<script type=”text/javascript” src=”jquery.text-overflow.js”></script>
<style type=”text/css”>
.overflow {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
width: 20%;
white-space: nowrap;
border: 1px solid black;
overflow: hidden;
margin-bottom: 15px;
<script type=”text/javascript”>
$(document).ready(function() {
<h1>Ellipsis Test Page</h1>
This is a test page for the ellipsis jQuery plugin.  You can see the original blog post</p>
If you resize your window, the ellipsis will be updated.
<div id=”one”>Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
This one will not update when you resize your window.
<div id=”two”>Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

Jquery Code

(function($) {
$.fn.ellipsis = function(enableUpdating){
var s = document.documentElement.style;
if (!(‘textOverflow’ in s || ‘OTextOverflow’ in s)) {
return this.each(function(){
var el = $(this);
if(el.css(“overflow”) == “hidden”){
var originalText = el.html();
var w = el.width();

var t = $(this.cloneNode(true)).hide().css({
‘position’: ‘absolute’,
‘width’: ‘auto’,
‘overflow’: ‘visible’,
‘max-width’: ‘inherit’

var text = originalText;
while(text.length > 0 && t.width() > el.width()){
text = text.substr(0, text.length – 1);
t.html(text + “…”);


if(enableUpdating == true){
var oldW = el.width();
if(el.width() != oldW){
oldW = el.width();
}, 200);
} else return this;


for more reference visit

: http://dl.dropbox.com/u/534786/index.html
Share this nice post:

2 thoughts on “css and jQuery ellipsis …

  1. Firefox 7 implemented “text-overflow: ellipsis” as well as “text-overflow: ‘string'”. Final release is planned for 2011-09-27.

Comments are closed.