Summary
The text-overflow CSS property determines whether an ellipsis (“…”) displays when text content has overflowed its given layout area. To force overflow to occur and ellipses to be applied, the author must apply some additional properties on the element. See example below.
Syntax
text-overflow: ellipsis | clip
Values
ellipsis
Display ellipses … (U 2026, …) to represent clipped text.
clip
Default value, clips text.
- p {
- white-space: nowrap;
- width: 100%; /* IE6 needs any width */
- overflow: hidden; /* "overflow" value must be different from "visible" */
- -o-text-overflow: ellipsis; /* Opera 9-10 */
- text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
- }