[#3280] Improvement(ui): Truncate key and values detail properties

[jtao1]

What changes were proposed in this pull request?

When the key and values are too long, they are not truncated and ellipses are added at the end of that string. The full key or value can be shown by hovering over with the tool tip.

Why are the changes needed?

When the key and values are too long, it will not be fully displayed unless the user uses the horizontal scroll bar.

Fix: #3280

Does this PR introduce any user-facing change?

N/A

How was this patch tested?

I tested this using this the web UI. The image below reflects my changes.

[LauraXia123]

hi, junshen the ci test failed by the text element changed. Can you update the test case code by these changes? @jtao1

[danhuawang]

@jtao1 Hi ,Jason , have you fixed the CI test in this PR?