Fix alignment of truncated text in tables

[silverwind]

Before:

After:

[wxiaoguang]

I do not think this fix is right.

Because, the problem is caused by a pollution: <td class="text truncate email"> ...

Then, the <td> becomes display: inline-block, it would cause other side affects, because it should be a table-cell.

[delvh]

Am I supposed to not see any difference in the screenshots?

[wxiaoguang]

Am I supposed to not see any difference in the screenshots?

There is slight difference for the "name: foo" and "version: 1.0.0", but, it's not an ideal fix (my comment above)

[silverwind]

There's two kind of problems here:

• td.text.truncate can be fixed with display: table-cell
• td .text.truncate can not be fixed with display: table-cell as the nested inline-block still misaligns

Not sure how to proceed.

[silverwind]

@wxiaoguang got any better solution ideas? I can't think of any and the current approach seems to reliably solve it.

[wxiaoguang]

Will think about it in a few days .....

[silverwind]

FWIW, vertical-align: bottom also fixes it and might be more intuitive because the text actually moves down. I don't understand the root cause yet. It's likely some obscure CSS rules related to tables.

[silverwind]

Minimal Fiddle to show the issue: https://jsfiddle.net/silverwind/fs7ghbeq/

[wxiaoguang]

I think we can drop the "text truncate" trick, and re-use the gt-ellipsis

Fix the truncate and alignment problem for some admin tables #26042

[silverwind]

What does work is just not alter display:

https://jsfiddle.net/silverwind/fs7ghbeq/12/

[silverwind]

I see your approach is exactly doing that. I think we can likely replace most if not all .text.truncate cases with gt-ellipsis.