Text Ellipsis

Text Ellipsis

Here we look at how to use CSS to trim your text and to put ... at the end when the text is too large for the space or container it is in. This has the advantage over performing a simimlar operation in code, in that it works on mobile responsive pages, so different screen resolutions show different amounts of text, automatically fitting in the text into the space, and chopping characters as required.

Below is a CSS class which will apply the ellipsis if the text is too long.

.text-ellipsis-block {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

Here is a demo: