ellipsis not working for long URL

Question

Ellipsis is not working properly in case of long URL. In case of URLs, it is treating / as special character and is breaking at every occurrence of /.

.ui-jqgrid tr.jqgrow td 
{
   font-weight: normal; 
   overflow: hidden; 
   text-overflow: ellipsis;
   -moz-binding:url('ellipsis-xbl.xml#ellipsis'); 
   white-space: normal !important; 
   height: 22px;
   padding: 4px 2px 4px 2px;
   border-bottom-width: 1px; 
   border-bottom-color: inherit; 
   border-bottom-style: solid;
}

Any idea how to escape special character in ellipsis?

Answer 1

You need to set white-space: nowrap; in order for the ellipsis behaviour to work as you expect.

Demo Fiddle

HTML

<div class='ellipsis'>http://stackoverflow.com/questions/22609623/ellipsis-not-working-for-long-url</div>

CSS

.ellipsis {
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-binding:url('ellipsis-xbl.xml#ellipsis');
    white-space: nowrap;
    height: 22px;
    padding: 4px 2px 4px 2px;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: solid;
    width:100px; /* set as an example */
}

Answer 2

I think you need to specify a width CSS property. .ui-jqgrid tr.jqgrow td { ... width: 15%; } JSFiddle Demo: http://jsfiddle.net/Lk55w/1/