line-clamp

In the world of CSS there are hidden little gems that no one tends to use a lot but line-clamp can be very helpful.

You can set the amount of lines of content you wish to show on a paragraph after which an ellipsis appears.

It is available on most browsers but not on IE11 and below, Opera Mini and one or two others but the main one’s are all covered.

The only downside to this is that Screen readers such as NVDA, JAWS and VoiceOver read out the whole sentence rather that stop at the ellipsis. There are two arguments to this that that screen reader should read out just what is on the screen or the screen reader reads out everything as it does not matter what is on the screen.

To be honest I prefer the screen reader to read out what is on the screen as it replicates what a user would see if they were not using one.

An example can be found on GitHub.
https://github.com/discodavey/line-clamp

Posted in Web