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

Question

I have used bootstrap media classes, i want to break in new line my title and description(clamp and place ellipsis if it exceeds width), i have used following css properties on and

tags as well but it is not working i.e.

white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;

title is overflowing from div, i just want to fit it in width by applying above css. it is working fine in chrome. but not in firefox.

Answer 1

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.

Answer 2

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.