Limiting text output to only show certain number of characters?

Dashboard
1

I made the text small:
image

But now I want to limit the amount of characters so each stacked text isn't spilling into each other:
image

Perhaps a way to limit text in template node?

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

2

Try Angular - LimitTo

3

Thanks. That helps the main issue:
image

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

4

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

[{"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}]
5

image

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

6

No. Font tag does not support much. HTML font tag. 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?

7

:slight_smile: 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
image761Ă—316 27.3 KB

8

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)

9 
<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?

10

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

11

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

12

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

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

13

image

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

image

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

Thank you. (But I cannot get that.)

image

Should the template node be connected? The "preview" text nodes are set to 4x1 size:
image
And it is deployed (unlike the new edits shown in the picture.)

15

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.

1 Like
16

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.

[{"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":[]}]
1 Like
17

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