# 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:** 9\
**Page:** 2

<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 21:39 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/21 "2024-10-23T21:39:22Z")

</div>

OK I put this in an editor CSS file (specified in settings.js). Does it look right?

```auto
.red-ui-debug-msg-topic {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--red-ui-debug-message-text-color-meta);
}
.red-ui-debug-msg-type-string {
    white-space: pre-wrap;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

```

Just considering msg.topic I get this

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

The topic in the first line is truncated at the end of the line ✔  
The ellipsis shows up but clicking does nothing. I'm happy with this on line 1.

But in the main body `topic` is truncated after 30 characters?  
It expands in two stages

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/62c933fc92373f279eb43a900396f1912019dacb.png)  
and  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/eb2d08cf4c805cd9db62ada9ea66e1d25a183e65.png)

A very nice result but once clicked it can't be reshrunk.

---

<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:48 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/22 "2024-10-23T21:48:32Z")

</div>

> [@jbudd](#):
>
> But in the main body `topic` is truncated after 30 characters?

Like topic in the first line, the msg max length is the container max width. So if you play with the size of the sidebar, the message length before truncating varies.

> [@jbudd](#):
>
> but once clicked it can't be reshrunk.

Did you click on the `topic: string` line?

---

<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 21:56 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/23 "2024-10-23T21:56:18Z")

</div>

> [@GogoVega](#):
>
> Did you click on the `topic: string` line?

No, but if I do, it goes back to the full single line.

> [@GogoVega](#):
>
> max length is the container max width. So if you play with the size of the sidebar, the message length before truncating varies.

That's not what I get, as my first pic shows. It's not really a problem though.

---

<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 22:07 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/24 "2024-10-23T22:07:50Z")

</div>

> [@jbudd](#):
>
> No, but if I do, it goes back to the full single line.

So I don't understand what you mean.

> [@jbudd](#):
>
> That's not what I get

I see but I think it's a CSS problem at the row level. It's like the comma at the start of the line rather than at the end of the line.

---

<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 22:10 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/25 "2024-10-23T22:10:13Z")

</div>

> [@GogoVega](#):
>
> I don't understand what you mean.

It did not occur to me to click either the topic: string line or indeed the small triangle next to it.  
Operator error!

---

<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 22:11 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/26 "2024-10-23T22:11:44Z")

</div>

😂 beginner's mistake 🤭 🙂

---

<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:** [28 October 2024 12:27 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/27 "2024-10-28T12:27:29Z")

</div>

@knolleary should i open an issue for this one?

PS: I will send the pure CSS version.

---

<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:** [5 November 2024 08:51 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/28 "2024-11-05T08:51:27Z")

</div>

> <https://github.com/node-red/node-red/pull/4944>
>
> \- \[\] Bugfix (non-breaking change which fixes an issue)
> \- \[x\] New feature (non-…breaking change which adds functionality)
> 
> \## Proposed changes
> 
> As described \[here\](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294), truncates long topic and string messages from the Debug Sidebar with pure CSS solution.
> 
> Preview:
> 
> \<img width="468" alt="truncate-debug-msg" src="https://github.com/user-attachments/assets/d357d3fd-0c3d-4798-a135-2d0cf3582b79"\>
> 
> 
> \## Checklist
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> \- \[x\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[x\] I have run \`npm run test\` to verify the unit tests pass
> \- \[\] I have added suitable unit tests to cover the new/changed functionality

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 January 2025 08:52 UTC](https://discourse.nodered.org/t/visually-truncate-long-strings-in-debug-side-bar/91294/29 "2025-01-04T08:52:22Z")

</div>

Closed on 4 January 2025 08:52 UTC

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

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