0

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.

Faseeh Haris
  • 643
  • 1
  • 6
  • 26

3 Answers3

2

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.

Community
  • 1
  • 1
Jordan Mann
  • 362
  • 8
  • 15
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.
TheCuBeMan
  • 1,532
  • 3
  • 20
  • 33
0

using max-width: -moz-available on select all elements fix my issue

Afaq Karim
  • 1
  • 1