text-overflow:ellipsis; can be tricky if you are unfamiliar with it because it requires other CSS properties to cooperate to work.
First, the element must be BLOCK LEVEL. That means if you are trying to make a link or other naturally inline element use ellipsis, then you should use display:block or display:inline-block as needed.
The element must have overflow:hidden. Overflow must be hidden otherwise the text will just flow outside of the elements boundaries.
The element’s text MUST NOT WRAP. Ellipsis truncates text horizontally, if text wraps, then it is being truncated vertically and not with ellipsis. Use the declaration white-space:nowrap to prevent wrapping.
In conclusion, to make text truncate with ellipsis using text-overflow ellipsis, use the following declarations.
text-overflow:ellipsisoverflow:hiddenwhite-space:nowrapdisplay:block/inline-block