# Multiline label

**URL:** <https://forum.universal-robots.com/t/multiline-label/977>\
**Category:** HTML\
**Created:** [July 14, 2017, 5:48pm UTC](https://forum.universal-robots.com/t/multiline-label/977 "2017-07-14T17:48:28Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon16416181](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@anon16416181](https://forum.universal-robots.com/u/anon16416181)\
**Post date:** [July 14, 2017, 5:48pm UTC](https://forum.universal-robots.com/t/multiline-label/977/1 "2017-07-14T17:48:28Z")

</div>

Hi all,

Is it possible to have a multiline label? I’ve tried the following:

- Setting the width of the outer div enclosing the label
- Inserting a text with newlines using `labelComponent.setText(text)`
- Inserting `<br>` tags inside the text

But none of those options above worked. The text is always displayed in a single line, and the part that falls off the boundaries of the div is just hidden. I’d need to wrap the text so that it continues in different lines.

Is there a way to do that without creating a label for each line?  
Thanks!

---

<div class="post-metadata">

**Author:** ![anon87661449](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@anon87661449](https://forum.universal-robots.com/u/anon87661449)\
**Post date:** [July 15, 2017, 6:12pm UTC](https://forum.universal-robots.com/t/multiline-label/977/2 "2017-07-15T18:12:21Z")

</div>

Add `<html>` at the beginning of your text.  
Example: `labelComponent.setText("<html>Line 1<br>Line 2")`

---

<div class="post-metadata">

**Author:** ![anon16416181](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@anon16416181](https://forum.universal-robots.com/u/anon16416181)\
**Post date:** [July 17, 2017, 1:40pm UTC](https://forum.universal-robots.com/t/multiline-label/977/3 "2017-07-17T13:40:09Z")

</div>

Awesome, works like a charm! Thank you very much!

---

<div class="post-metadata">

**Author:** ![anon81172153](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@anon81172153](https://forum.universal-robots.com/u/anon81172153)\
**Post date:** [August 10, 2017, 12:04pm UTC](https://forum.universal-robots.com/t/multiline-label/977/4 "2017-08-10T12:04:57Z")

</div>

Hey,

How do you set the width of a div? When I tried `<div style="display:inline-block; width:100px;">` it had zero effect…

---

<div class="post-metadata">

**Author:** ![anon16416181](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@anon16416181](https://forum.universal-robots.com/u/anon16416181)\
**Post date:** [August 10, 2017, 1:35pm UTC](https://forum.universal-robots.com/t/multiline-label/977/5 "2017-08-10T13:35:20Z")

</div>

@anon81172153 if the div is empty you won’t see anything, you will need to fill it with something.  
If you just want a space to place another object according to your needs, try wrapping your object inside a div and add padding to that outer div.

---

<div class="post-metadata">

**Author:** ![anon81172153](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@anon81172153](https://forum.universal-robots.com/u/anon81172153)\
**Post date:** [August 10, 2017, 4:06pm UTC](https://forum.universal-robots.com/t/multiline-label/977/6 "2017-08-10T16:06:53Z")

</div>

@anon16416181  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/universal_robots/original/1X/bf9ff169e40b7b7bc7705425b57ede7f0cc75a6a.png)

![image](https://us1.discourse-cdn.com/flex020/uploads/universal_robots/original/1X/da7cb15014a98c35a421c65ec1e8074afedc7033.png)

![image](https://us1.discourse-cdn.com/flex020/uploads/universal_robots/original/1X/bd843f7d5070d3bbf7dbc395a24beebe21c931e2.png)

Sorry for the chinese text… So as you can see the 3 labels are very close to each other and if the width styling worked they would be much further apart.  
On another node however I tried this  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/universal_robots/original/1X/78ce90a3c4df2f5b4d46411b6d8cd6dc81f1d01f.png)

![image](https://us1.discourse-cdn.com/flex020/uploads/universal_robots/original/1X/36bee6da5e5d1385fa2499aa5092a8c57d06bf14.png)

And it worked! So I have no idea why it works in one place and not in the other. What do you think?

---

<div class="post-metadata">

**Author:** ![anon16416181](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@anon16416181](https://forum.universal-robots.com/u/anon16416181)\
**Post date:** [August 10, 2017, 4:25pm UTC](https://forum.universal-robots.com/t/multiline-label/977/7 "2017-08-10T16:25:22Z")

</div>

I’m not 100% sure, but maybe it’s because in the first case you are filling the text from the backend code.  
Using width to space components never worked for me; the only thing it does is cutting whatever is inserted inside the component (are you sure the spacing is correct? I see the “force/torque” text is cut at the end).

To space elements, I always try wrapping elements in an outer div and setting padding in that outer element.

---

<div class="post-metadata">

**Author:** ![anon81172153](https://avatars.discourse-cdn.com/v4/letter/a/278dde/32.png) [@anon81172153](https://forum.universal-robots.com/u/anon81172153)\
**Post date:** [August 14, 2017, 9:05am UTC](https://forum.universal-robots.com/t/multiline-label/977/8 "2017-08-14T09:05:43Z")

</div>

@anon16416181  
Backend loading makes no difference in this case.  
See the issue I’m having is I’m trying to internationalize our app and I need to make sure the labels are of fixed with so the elements don’t move around based on the length of the loaded text.  
Setting the width of the label should work fine, however that blocks backend loading the text for some reason.

So now my solution is to wrap labels in an outer div and put a zero height hr tag under it, which I can use to set the minimum width of the div. But this is an ugly workaround.

Do you have any suggestions or ideas?  
Thanks for the help!
