Text Ellipsis

text-overflow:ellipsis; only works when the following are true:

The element's width must be constrained in px (pixels). Width in % (percentage) won't work.

The element must have overflow:hidden and white-space:nowrap set.

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