text-overflow:ellipsis css property not working in firefox, prev solution on stackoverflow is also not working

Simply set the following definitions on the inner DIV:

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

• "width" can be whatever you need, as long as it's definitive (px or %). Otherwise, the "ellipsis" effect will not work, because the browser doesn't know where the container "ends" and that the content is overflowing from this point on.

According to this thread, ensure that your text is constrained by making the element, or its parent, be display:block or display:inline-block, and have a width or max-width setting (not in %).

There are some other methods that you can try on that page.