Use CSS to display too long texts

tahowallet / extension

Taho, the community owned and operated Web3 wallet.

https://taho.xyz

GNU General Public License v3.0

3.11k stars 393 forks source link

Use CSS to display too long texts #3405

Open kkosiorowska opened 1 year ago

kkosiorowska commented 1 year ago

Currently, if the name is too long we use the trimWithEllipsis function to display it correctly in the container. We should do this with a flexbox using the prioritization of the elements in the container.

Originally posted by @Shadowfiend in https://github.com/tahowallet/extension/pull/3394#discussion_r1204943947

Shadowfiend commented 1 year ago

I poked at this a little, it takes some elbow grease, but the short version is:

We need overflow: hidden on .asset_left and .asset_left_content to give flexbox the understanding it needs to truncate.
Then we need .asset_amount to have text-overflow: ellipsis and white-space: nowrap (I think this is what .ellipsis provides). We also need to drop overflow-wrap and word-break there.