The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (…), or display a custom string.
Both of the following properties are required for text-overflow:
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis; only works when the following are true:
1) The element’s width must be constrained in px (pixels). Width in % (percentage) won’t work. However, we can still use % width and attain text-overflow: ellipsis. This is possible by using width: calc([YOUR PERCENT]%) instead of using width: [YOUR PERCENT]%.
Example code snippet:
display: inline-block;
text-overflow: ellipsis;
width: calc(80%);
2) The element must have overflow:hidden and white-space:nowrap set.