.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
Note that
text-overflow only occurs when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap;.
Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.
The following demo displays the behavior of the
text-overflow property including all the possible values. Browser support varies!
Setting
overflow to scroll or auto will display scrollbars to reveal the additional text, while hidden will not. The hidden text can be selected by selecting the ellipses.