# Limiting text output to only show certain number of characters?

**URL:** <https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006>\
**Category:** Dashboard\
**Created:** [29 January 2021 18:03 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006 "2021-01-29T18:03:50Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [29 January 2021 18:03 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/1 "2021-01-29T18:03:50Z")

</div>

I made the text small:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a1cbb8c82f60d886d722dd4605839926e74aaa63.png)

But now I want to limit the amount of characters so each stacked text isn't spilling into each other:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e3bafcb229347045ce539411818786c4361fc170.png)

Perhaps a way to limit text in template node?

if(text \> 50) msg.payload.join("...")

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [29 January 2021 18:23 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/2 "2021-01-29T18:23:21Z")

</div>

Try Angular - LimitTo

> **[All About the Built-In AngularJS Filters](https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters)**
>
> Introduction You may not know this - but AngularJS comes with many handy filters built-in. I see programmers reinventing the wheel and reimplementing functionality that already exists all the time. Sometimes this happens because you need to address a...

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [29 January 2021 18:40 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/3 "2021-01-29T18:40:02Z")

</div>

Thanks. That helps the main issue:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/2/d2811c747db8414cf99e6a840349261cf427f4ab.png)

What about adding "..." to the cut-off string payload?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 January 2021 18:41 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/4 "2021-01-29T18:41:37Z")

</div>

Or maybe try to use `ui_template` node where you can do much more fine tuning.

```auto
[{"id":"db7ed637.0e13f8","type":"inject","z":"3e015b6a.3ff654","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, ","payloadType":"str","x":160,"y":120,"wires":[["ebb02e6c.96ee1"]]},{"id":"ebb02e6c.96ee1","type":"ui_template","z":"3e015b6a.3ff654","group":"e44fafb9.27f56","name":"","order":0,"width":"4","height":"1","format":"<div class=\"threeLineText\" ng-bind-html=\"msg.payload\"></div>\n<style>\n .threeLineText{\n font-size:10px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":360,"y":120,"wires":[[]]},{"id":"e44fafb9.27f56","type":"ui_group","name":"Default","tab":"1a6cce21.8ac4d2","order":1,"disp":true,"width":"6","collapse":true},{"id":"1a6cce21.8ac4d2","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [29 January 2021 19:09 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/5 "2021-01-29T19:09:33Z")

</div>

> [@hotNipi](#):
>
> ```auto
> [{"id":"db7ed637.0e13f8","type":"inject","z":"3e015b6a.3ff654","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, Circle, ","payloadType":"str","x":160,"y":120,"wires":[["ebb02e6c.96ee1"]]},{"id":"ebb02e6c.96ee1","type":"ui_template","z":"3e015b6a.3ff654","group":"e44fafb9.27f56","name":"","order":0,"width":"4","height":"1","format":"<div class=\"threeLineText\" ng-bind-html=\"msg.payload\"></div>\n<style>\n .threeLineText{\n font-size:10px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":360,"y":120,"wires":[[]]},{"id":"e44fafb9.27f56","type":"ui_group","name":"Default","tab":"1a6cce21.8ac4d2","order":1,"disp":true,"width":"6","collapse":true},{"id":"1a6cce21.8ac4d2","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
> 
> ```

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

Is there a way to just do something like `<font size=2px>{{msg.payload | limitTo: 54 | text-overflow: ellipsis}}</font>`

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 January 2021 19:12 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/6 "2021-01-29T19:12:41Z")

</div>

No. Font tag does not support much. [HTML font tag](https://www.w3schools.com/tags/tag_font.asp). And it is not valid filter.

What is the problem with the `ui_template` node so that you still need to use the `ui_text`?

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [9 February 2021 21:21 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/7 "2021-02-09T21:21:36Z")

</div>

🙂 What is my problem with the `ui_template` node? I think it was changing everything on that tab, and I just wanted to contain the smaller font to that one text box.

Or I just couldn't get it to work:

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 21:42 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/8 "2021-02-09T21:42:39Z")

</div>

Well, that image doesn't tell too much what node is doing he things on dashboard.  
But the solution was too straightforward to make it misbehave.  
Only thing I can think is the browser support. So what browser do you use (and OS)

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [9 February 2021 22:13 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/9 "2021-02-09T22:13:00Z")

</div>

```auto
<div class="threeLineText" ng-bind-html="msg.payload"></div>
<style>
    .threeLineText{
        font-size:2px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
         limitTo: 54; // probably incorrect
        overflow: hidden;
        text-overflow: ellipsis; // not viewable
    }
</style>

```

Where is `limitTo` put after?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 22:20 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/10 "2021-02-09T22:20:50Z")

</div>

limitTo is not valid css property. What is the thing you try to limit? words? characters?  
If you try to take slice or part of the string, that operation must be done before you send the string to the ui\_template.  
And what do you mean by `text-overflow: ellipsis; // not viewable`

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [9 February 2021 22:21 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/11 "2021-02-09T22:21:57Z")

</div>

Yes, I need to limit characters, roughly to 54 in that 4x1 text box.  
The ellipsis for the text overflow is not showing.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 22:30 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/12 "2021-02-09T22:30:14Z")

</div>

If you use the provided example as it was, there is no need to limit anything. It cuts the text and adds the dots. (of course it is reasonable to not send thousands of characters )

font-size: 2px; Really???  
This is 2px font size  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/496e8b54487a20f0266dcb73d321e64a3ed67ef1.png)

-webkit-line-clamp: 3; That is the line count. That many lines will be presented.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 February 2021 22:32 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/13 "2021-02-09T22:32:55Z")

</div>

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

```auto
<style>
    .threeLineText{
        font-size:8px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

```

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

```auto
<style>
    .threeLineText{
        font-size:10px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![adamelli](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/adamelli/32/31793_2.png) [@adamelli](https://discourse.nodered.org/u/adamelli)\
**Post date:** [9 February 2021 23:10 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/14 "2021-02-09T23:10:12Z")

</div>

Thank you. (But I cannot get that.)

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

Should the template node be connected? The "preview" text nodes are set to 4x1 size:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/3/732fcb6fdff0029bf004af54613f1b60fc628bb9.png)  
And it is deployed (unlike the new edits shown in the picture.)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 February 2021 06:30 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/15 "2021-02-10T06:30:15Z")

</div>

Again, if you see my example - the `ui_template` is responsible of showing the text. It is not meant to be feed to the text node.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [10 February 2021 10:00 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/16 "2021-02-10T10:00:41Z")

</div>

> [@adamelli](#):
>
> What about adding "..." to the cut-off string payload?

As you are just displaying the data and not passing it on, why not format it prior to the dashboard text node. Quick and simple.  
i.e.

```auto
[{"id":"b3c025f0.0f7168","type":"inject","z":"8d8a515a.78af18","name":"20","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fsfsf sf fs q rq gqe","payloadType":"str","x":210,"y":1200,"wires":[["365725.7f7778dc"]]},{"id":"365725.7f7778dc","type":"change","z":"8d8a515a.78af18","name":"format","rules":[{"t":"set","p":"payload","pt":"msg","to":"$length(payload) > 20 ? $substring(payload,0,17) & \"...\" : payload","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":1160,"wires":[["e80941b3.dfb168"]]},{"id":"ec90f25e.83b208","type":"inject","z":"8d8a515a.78af18","name":">20","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"fsfsf sf fs q rq gqege eege egge egeg qwge","payloadType":"str","x":210,"y":1160,"wires":[["365725.7f7778dc"]]},{"id":"e80941b3.dfb168","type":"debug","z":"8d8a515a.78af18","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":510,"y":1160,"wires":[]}]

```

---

<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:** [24 February 2021 10:01 UTC](https://discourse.nodered.org/t/limiting-text-output-to-only-show-certain-number-of-characters/40006/17 "2021-02-24T10:01:28Z")

</div>

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