CSS Multiline Ellipsis article thumbnail

CSS Multiline Ellipsis

Almost on every project we need to be creative about CSS, especially for special cases like the possibility that the text is too long for the space provided. In this type of case this should be suggested in a way as simple as possible, more precisely the ’’... ’’ (dots) at the end of the paragraph before the space runs out, those things we see so often, especially in the previews of some pages through The Open Graph Protocol.

CSS Multiline Ellipsis article poster

PROBLEM: For the most part, something easy to use should exist out there, especially considering that in so many years of existing web this problem has certainly appeared.

Unfortunately, there was no easy trick to put in your code and make everything work without any compromise.

Initial Source Code Let's consider the following HTML and CSS which represents our start

CSS Multiline Ellipsis article poster
CSS Multiline Ellipsis article poster

looking just like this at the moment:

CSS Multiline Ellipsis article poster

AT FIRST: We all know the text-overflow CSS property. Well, it seems like it can be set to ellipsis, affecting content that is overflowing a block container element in its inline progression direction. For it to work, we also need to use overflow: hidden and white-space: nowrap to make the text overflow its container.

Let’s add the “ellipsis” custom CSS class to one of ours paragraphs.

CSS Multiline Ellipsis article poster

And the css for this class:

CSS Multiline Ellipsis article poster

with the result:

CSS Multiline Ellipsis article poster

Seems like this combination of properties only works for one line. Not what we want.

CONTINUATION: Let’s consider for a moment that we can use javascript (jQuery). We could trigger the truncation in ... a very not convenient way, setting a max length of characters per given row in the container.

The code should look like this:

CSS Multiline Ellipsis article poster

However, to be serious and get out of this upheaval... No one wants to compromise in this way.

MOVING ON: Keeping the javascript in mind, I searched for some lighweight plugins and resources to do this thing for me in a way I wouldn’t bother about height, number of given rows, the container is a <p> or <span> & so on.

If we do not take into account the fact that most of them are based on jQuery and they were created a long time ago, when the Web was just a teenager, then everything is good.

Sadly, the project I was focused on uses React as main FrontEnd technology. Adding jQuery plugins into our resources and code would just make everything a little bit... doubtful.

IN MY WAY: In a constant search for better ways to accomplish what I wanted, I came across something interesting, which is pure CSS, but does not exclude compromises.

I found these and they’re more or less tested and easy to use, dependable.

CSS Multiline Ellipsis article poster

At a first glance we can observe the use of -webkit in multiple cases, which is fine for the modern browsers. But, is that all? Why does it need to be flexbox? How comes that it uses the old fashioned -webkit-box? Apparently, it doesn’t work without the display part and adding extra padding in the container will expose more lines than specified.

In the same information thread I also found an interesting cheat which turned out not to work properly. It is supposed to accomplish the ellipsis only on Firefox, but the last line, the one where the dots are meant to be placed, is cut in half. As I tried several times out of curiosity and I did not find a solution, I resigned. The fact that the line was not fully visible vertically made me think it has something to do with line-height, a property I didn’t mention in my previous CSS code.

CSS Multiline Ellipsis article poster

FINALLY

Speaking of line-height...

What I wanted from the beginning came to be solved in the only way I could not think of a compromise, but only in definition. As it doesn’t need fixed height for the container and works on all html tags that are able to contain text, I got pretty interested in this solution, weird at first.

Let’s look at the code:

CSS Multiline Ellipsis article poster

and what it does to our container:

CSS Multiline Ellipsis article poster

Long story short: The container needs a plain background color to cover the dots (’’... ’’) if the text is less than the given max number of lines. There should also be some space for the dots and move the text content to the left if we want to keep the original size of the parent block. We use the text-align: justify to ensure that the text always ends up being at the right of the block(fixing the problem when last visibile word doesn’t adjoing the right side). Everything is made possible by the simple property line-height, which in our case is 1.2em. Making the container’s max-height a multiple of line-height gives us the power to choose how many lines of content we want before ellipsis appears.

Using SCSS & @mixin to create multiple classes with different number of rows

Let's reate a mixin which takes the height of a line, the number of wanted lines and the background color of the container:

CSS Multiline Ellipsis article poster

Using this mixin, we can create multiple CSS classes which take different arguments:

CSS Multiline Ellipsis article poster
CSS Multiline Ellipsis article poster

Having the HTML and the CSS above, the result will be:

CSS Multiline Ellipsis article poster

Conclusion: There is no completely uncompromising solution, but I managed to find some interesting ones. They show us how much web programming has developed and how people back then solved things that at first glance seem simple.

Eventually I ended up using an idea that is not exactly intuitive, but one that works properly and does not require continuous maintenance.