# Visually truncate long strings in debug side-bar

**URL:** <https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294>\
**Category:** Feature Requests\
**Created:** [27 September 2024 07:25 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294 "2024-09-27T07:25:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [27 September 2024 07:25 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/1 "2024-09-27T07:25:57Z")

</div>

When there is a long string in a property, would it be possible to have this actually truncated to 1 or 2 lines with a `...` behind it when it is not expanded ?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c924f3803a07d9f23e25e0d549474c3b626823ab.png)

Expanding it only adds linebreaks.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 September 2024 07:32 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/2 "2024-09-27T07:32:56Z")

</div>

+1 from me

Lets see what the consensus is.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 September 2024 10:10 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/3 "2024-09-27T10:10:04Z")

</div>

Totally agree. 🙂

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [22 October 2024 13:54 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/4 "2024-10-22T13:54:06Z")

</div>

What would be the max length before the `...`?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 October 2024 14:36 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/5 "2024-10-22T14:36:49Z")

</div>

If this is done via CSS, it would be "what fits on one line"

If done via code, then something sensible like 80 or 160 chars.

* * *

My preference is using CSS to form the ellipsis & clicking the item simply toggles the class.

Additionally, I would have the `title` set to the same value so that it can be "peeked" via a tooltip (but that's just me)

FYI: [Truncate String With Ellipsis | CSS-Tricks](https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/)

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [22 October 2024 14:50 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/6 "2024-10-22T14:50:21Z")

</div>

I can't do it with CSS, maybe I'm using it wrong 😅

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 October 2024 15:51 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/7 "2024-10-22T15:51:34Z")

</div>

I find it annoying when a long SQL query is in msg.topic since the topic is always (?) shown at the top of the debug output.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/78c1d4d8d58641286934fe81ba9373d309dcf3e7.png)

And especially when the debug is set to show the complete msg because then I get the whole topic twice over.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/1/b1145af028cc76a620d0f3e24607b5020f59b06f.png)

An editor CSS file does let me truncate the first copy of the topic.

```auto
.red-ui-debug-msg-topic {
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
}

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b322d5e4506fa4f0d72dce60f26a710a6568a941.png)

Unfortunately the ellipsis bit doesn't work (Firefox 130) :

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/440ee556fd1efb56c506448f64df0433859b7b23.png)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [22 October 2024 16:18 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/8 "2024-10-22T16:18:58Z")

</div>

> [@jbudd](#):
>
> `.red-ui-debug-msg-topic { max-height: 40px; overflow: hidden; text-overflow: ellipsis; }`

you may need a ` white-space: nowrap` as well, but you may end up in conflict with the height (?)

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [22 October 2024 16:22 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/9 "2024-10-22T16:22:34Z")

</div>

I have, it works. Thanks

But for one line is short, no? For the topic it looks good but not for the payload.

 ![Capture d’écran 2024-10-22 à 18.38.10](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b3dbdac2910cd4cc42ef0d754d92fa3119b425d.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 October 2024 17:14 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/10 "2024-10-22T17:14:13Z")

</div>

> [@bakman2](#):
>
> white-space: nowrap;

Good suggestion, thanks.

That truncates msg.topic after a single line, making max-height redundant. I do now see the ellipsis but it's not clickable (which is OK).

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/167c98d45ff115c1ac0dcadde6492907412b6ee3.png)

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [23 October 2024 12:51 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/11 "2024-10-23T12:51:10Z")

</div>

@Steve-Mcl Does a mix of CSS for topic and code for payload suit you? Because for the payload one line seems insufficient to me.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 October 2024 13:19 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/12 "2024-10-23T13:19:09Z")

</div>

> [@GogoVega](#):
>
> Because for the payload one line seems insufficient to me.

Why not?

Can you show us some variations of how it looks with a pure CSS solution? (long topic, short payload, vice versa, both long, expanded + collapsed) - Ta.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [23 October 2024 14:55 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/13 "2024-10-23T14:55:32Z")

</div>

Sorry for the delay. So...

 ![Capture d’écran 2024-10-23 à 16.54.42](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4bfcf3073cc2f6cbcf9aee6c9d46d9e75005e821.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 October 2024 15:00 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/14 "2024-10-23T15:00:32Z")

</div>

That all looks good to me. 🙂

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [23 October 2024 15:14 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/15 "2024-10-23T15:14:45Z")

</div>

VS topic with CSS and payload without:

 ![Capture d’écran 2024-10-23 à 17.13.41](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/1132ec7370f276e79a0850135f6d671d077b1b2f.png)

_Poll ([view on site](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/15))_

(I'm having fun testing poll 😂)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [23 October 2024 15:55 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/16 "2024-10-23T15:55:56Z")

</div>

Did you try this with spaces in the string (it may behave differently due to white-space), but in conjunction with this request - the debug to the console also gets truncated (currently), which in my opinion should not be happening. ie. one sends it to console to see the full output.

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [23 October 2024 16:12 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/17 "2024-10-23T16:12:21Z")

</div>

Yep

 ![Capture d’écran 2024-10-23 à 18.11.48](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f3fc31bd22492b4244de35646f11da466dbeb99.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 October 2024 19:37 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/18 "2024-10-23T19:37:28Z")

</div>

Can you add another option to the poll - "Either"! 🙂 I genuinely think both are good and I'd be happy either way. Great work.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 October 2024 20:57 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/19 "2024-10-23T20:57:31Z")

</div>

@GogoVega can you show us the CSS for your purely CSS alternative?

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [23 October 2024 21:17 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/20 "2024-10-23T21:17:06Z")

</div>

Of course 😉

> <https://github.com/GogoVega/node-red/commit/702bf3d547036e4ba435fc04f1d99d6e35e71c0e>

PS: I just realized that the collapse arrow only appears if the payload contains `\t \r \n` - I had added a length condition while testing.

[Next page](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294.md?page=2)