Fix issue text overflow when user name is too long

[NguyenThuyLan]

Prerequisites

• I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes

Description

This PR fixes the issue #18535

After fixed:

[bjarnef]

That's a pretty long name 😅

I think it would be better to hide overflow using ellipsis.

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

or line clamp specific 2 lines which is supported in most modern browsers: https://caniuse.com/?search=line-clamp

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

[NguyenThuyLan]

Thanks @bjarnef , I have changed my PR, we will display the user name with ellipsis at the end and when hovering, the user can see the full text.

[leekelleher]

Resolved the merge conflict and tested out, looking good! 🚀

[nielslyngsoe]

I have added a few comments :-)

[nielslyngsoe]

I now see that we have the user-name in the Not logged in-message. That is not needed. The reader can read the name two lines above. I'm not sure why it ever has been like this but lets get rid of the name now that we are correcting this.

So it should look like this:

Making the 'not logged in yet'-message the replacement for the missing date. In similar manner we do not render the name when the user has logged in.

And with umbraco/Umbraco.UI#1036 then the card seems good.

Then I would actually revert the ellipsis from the date part here — we know the length of this message, no need to hide it.

[iOvergaard]

Added a fallback key and <umb-localize />. LGTM.

Has been fixed