Long descriptions in NFTs overview

[daniel-soli]

"BUG":

When showing an overview of NFTs, when a NFT has a very long description it kinda messes with the layout.

Example:

Possible fix:

Truncating the description text, setting a max value for characters and cutting after whole word and adding trailing "..." to show it's more description. This will of course be shown in the NFT detail page. But in the overview it can be a bit much with the full description.
This is how it will look:

See this branch for code and usage.

[modersohn]

Yeah, I've seen this as well and also checked out your code.

While your approach certainly is valid (truncating the text and adding ...), I wonder how difficult it would be to add a "Show more" link which, when clicked expands the full text. That's what other sites do and I find that approach even better. What do you think?

[modersohn]

I have not evaluated these fully, but a quick google search gives some interesting hints:

• https://stackoverflow.com/a/11417877/386473
• https://stackoverflow.com/a/28522076/386473

[daniel-soli]

I had that thought also to add this, but in the end decided not to because who reads the full description of the NFT in the overview page. And if so, you can just go to the NFT page. Don't think it is necessary to add. That's just my take on this, it is certainly doable :)

[modersohn]

Yeah, but why add code if the same thing can already be achieved just with .css because the browser have support for this?

From my point of view, adding extra code is only justified if we can offer more, i.e. the Show more/Show less links.

[modersohn]

As discussed privately, I'll see if I can get it work just with css. If that proves to cumbersome, we can still go with the code approach.

[modersohn]

I think I found a way using -webkit-line-clamp. I'll make a PR with this.