Cards can't handle very long words

[FleetAdmiralJakob]

As seen here, if I use a very long (longest english word in a major dictionary) the card does not know how it should handle it. An easy solution would be to add a break-words and hyphens-auto to the title.

I would be up on fixing this problem if this solution is approved.

[iamabhshk]

@FleetAdmiralJakob Shall I work on this?

[FleetAdmiralJakob]

Sure, if you want. I could also do this but go for it!

[FleetAdmiralJakob]

Pls. show me the PR so I can review it

[iamabhshk]

Sure

[iamabhshk]

@FleetAdmiralJakob is this worked upon? I just checked the same in mine, its seems to be working fine. Can you please confirm?

[FleetAdmiralJakob]

I thought you were working on this? I didn't work on this, but I can.

[FleetAdmiralJakob]

It's still a problem

[MohammedAslam106]

This is happening because there is no space in between the text.

[iamabhshk]

@MohammedAslam106 yes you are right!! It's happening only when it's a single long word

[FleetAdmiralJakob]

This is happening because there is no space in between the text.

@MohammedAslam106 This isn't a text. This is the longest English word.

[MohammedAslam106]

@FleetAdmiralJakob Yes, maybe text-ellipsis will fix it. But you have to hide the overflow content. And you will no longer be able to see the full text.

[iamabhshk]

Ok let me give a try and share a screenshot of that

[FleetAdmiralJakob]

@FleetAdmiralJakob Yes, maybe text-ellipsis will fix it. But you have to hide the overflow content. And you will no longer be able to see the full text.

I think that is not an acceptable solution since the user should see the full text.

[iamabhshk]

Or shall we use whitespace-pre-wrap" ?

[FleetAdmiralJakob]

idk, can you try some things out and send me the comparison screenshots?

[iamabhshk]

I applied max-w-md overflow-hidden on the card component, now the card size is fine but the text is still behaving same. Any idea how to fix that?

[FleetAdmiralJakob]

An easy solution would be to add a break-words and hyphens-auto to the title.

NOTE: This only breaks words that are words. Not ssdssssss and so on.

[MohammedAslam106]

Here is my solution.

[iamabhshk]

Here is my solution.

This looks good

[MohammedAslam106]

An easy solution would be to add a break-words and hyphens-auto to the title.

NOTE: This only breaks words that are words. Not ssdssssss and so on.

To implement this, we have to fix the width of the title tag.

[MohammedAslam106]

An easy solution would be to add a break-words and hyphens-auto to the title.

NOTE: This only breaks words that are words. Not ssdssssss and so on.

There is a problem with this solution. Here is the result.

[FleetAdmiralJakob]

Could you reupload the image?

[MohammedAslam106]

Could you reupload the image?

[MohammedAslam106]

I have a question for you.

How you are using this card example in your code?

Where is the code for this card example?

[FleetAdmiralJakob]

I didn't use the card component because of this problem not yet, but if this problem is fixed I want to replace these cards with the better cards (with a solution for this problem).

https://github.com/The-Creative-Programming-Group/Weather-App/blob/master/apps/web/src/pages/home/index.tsx

[MohammedAslam106]

I'm pushing this PR. Just use different classes as per your need inside the CardTitle.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.