The Power Of Ellipsis

Tue Nov 02 2021

Responsiveness is a concern that should be front and center for any modern front-end developer.
Your site should look brilliant on all screens; large and small

I often encounter situations where i need to display lots of content within an element, which causes a very ugly render on small screens.
This often occurs when trying to present data in a table like in the example below.

This table looks bad on mobile

ID	Real Name	Superhero Name	Power	Quote
0	Tony Stark	Iron Man	Genius level scientist with a Super Powered suit of armor	JARVIS, make a note. Remind me not to wake up in the morning ever again.
1	Natasha Romanoff	Black Widow	Master in the covert arts of espionage, infiltration, and subterfuge	"I Could Have Been More Famous Than Captain America"
2	Carol Danvers	Captain Marvel	Photon Energy absorbed from the Tesseract granting her enhanced strength, stamina, agility, durability, and flight	"Higher, further, faster, baby.”
3	Peter Parker	Spider-Man	Abilities gained from radioactive spider bite: Superhuman strength, agility, endurance, ability to stick to and climb walls and other surfaces	"With great power, comes great responsibility."

This table looks clean and tidy on a large screen, but on smaller devices the large amount of text will quickly take up the entire window. My favorite way to solve this problem is to only display the first few characters in the paragraph, and replace the overflow with "ellipsis..."

This allows us to view the full text on large screens, and just the first bit of the text on small screens You can see this in action with the sample below:

This table looks good on both desktop and mobile

ID	Real Name	Superhero Name	Power	Quote
0	Tony Stark	Iron Man	Genius level scientist with a Super Powered suit of armor	JARVIS, make a note. Remind me not to wake up in the morning ever again.
1	Natasha Romanoff	Black Widow	Master in the covert arts of espionage, infiltration, and subterfuge	"I Could Have Been More Famous Than Captain America"
2	Carol Danvers	Captain Marvel	Photon Energy absorbed from the Tesseract granting her enhanced strength, stamina, agility, durability, and flight	"Higher, further, faster, baby.”
3	Peter Parker	Spider-Man	Abilities gained from radioactive spider bite: Superhuman strength, agility, endurance, ability to stick to and climb walls and other surfaces	"With great power, comes great responsibility."

HOLY MOLEY!

Thats a dramatic difference on mobile devices
This technique prioritizes the readability of the table and effectively “Drops” the leftover information.

To accomplish this effect you can add this small CSS class to your code which specifies the text has at most 25 characters, all remaining characters will be replaced with an ellipsis ”…”

<style>
	.ellipsis {
		overflow: hidden;
		max-width: 40ch;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>

you can then use this class within your html document like so:

<td class="ellipsis">
	Photon Energy absorbed from the Tesseract granting her enhanced strength, stamina, agility,
	durability, and flight
</td>

Alternatively if you are already using a frontend framework: there’s a strong chance this class has already been implemented for you.

Framework	Example Use
Bootstrap	`<p class="text-truncate"> very very very very very long text </p>`
Quasar	`<p class="ellipsis"> very very very very very long text </p>`
Tailwind	`<p class="truncate"> very very very very very long text </p>`