Text Ellipsis


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

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:

Here is a test of using text ellipsis by using the above CSS class on the container div of this text, try re-sizing the browser window too. I've added some extra text here so you can see the ellipsis take effect.
Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.