How to insert blank text space in a UI text node?

Hi all,
Do you know how to insert "blank text" in this line?
image
I tried spaces (keyboard space bar), but they don't count. I have to put characters (points) to separate these 2 values.

{{payload.temp}}°c ..... <span class="fa fa-tint"></span>{{payload.hum}} %<br> <span class="fa fa-signal"></span><small>{{payload.rxRSSI}} dB</small>

image
How to replace "points " to "blank text space " ?

Try &nbsp;&nbsp;&nbsp;&nbsp;
Or

<pre>       </pre>

result of : <pre> </pre> looks like <br>
image

result of : &nbsp;&nbsp;&nbsp;&nbsp;
image

Wonderfull ! it's working !
Thanks @E1cid

1 Like

Put the temps inside the <pre></pre>

temp1      temp2

sorry i think i don't understand (i'm beginner in html ):
like this : <pre>temp1 temp2</pre> ?
image

[EDIT] Howw ! i understand i have to put my payloads inside

 ! okk !

the result :
image

<pre>{{payload.temp}}°c    <span class="fa fa-tint"></span>{{payload.hum}} %</pre><br> <span class="fa fa-signal"></span><small>{{payload.rxRSSI}} dB</small>

:thinking: there is a strange reaction :
after the "%" there is a <br> and the line break is huge, and the font has changed.

So i think i keep &nbsp; solution :slight_smile:

Just for info.

<pre>{{payload.temp}}°c    <span class="fa fa-tint"></span>{{payload.hum}} %<br> <span class="fa fa-signal"></span><small>{{payload.rxRSSI}} dB</small></pre>

As the pre would add a line break.

image
ah yes, exact if I remove the <br> I am less "discarded".
I learned a lot of things, it's cool. Thanks

In addition or instead, you can use &ensp; or &emsp; or &thinsp; to give a bit more exact control of the spacing.

Thanks for this add , it's usefull too :
image

1 Like

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