CSS’s text-overflow property is rarely used but easy to implement. When given the value of ellipsis, it adds an ellipsis to the cut off point of any text that doesn’t fit within its parent element.
Join us in our newest publication:
The CSS to achieve the effect above looks like this:
- p{
- white-space: nowrap; //this prevents line breaks
- overflow: hidden; //this hides text that doesnt fit within the div
- text-overflow: ellipsis; //this adds the ellipsis to the cutoff point
- }
This effect only works for single lines, which is why we must include the white-space property for it to be functional. It also must be used in conjunction with the overflow: hidden property/value.