Word wrap button labels

Community Usage questions
1

Is there a way to wrap labels onto multiple lines on a button label?

I have a set of buttons that populates articulation descriptions using a custom module depending on which cubase track is selected. This all works fine.

The problem comes when the articulation is a very long string.

Currently the button keeps all the string on the same line so you can’t read the full articulation. I don’t want to resize the buttons as it’s quite a big array of them so would like to force the button to wrap the text if it needs to. Is this possible?

2

Yes, you need to add this to the css field:

label {
  white-space: normal;
  word-break: break-all;
}

Or directly to the root’s css to affect all buttons:

.button-container label {
  white-space: normal;
  word-break: break-all;
}

I’ll add a wrap property to this widget.

1 Like
3

Thanks very much!

4

I've just come back to this one as I now need to wrap the text on a switch and the above methods don't appear to work - is there a way to wrap the labels on a set of switches?...

5

You can use the browser's inspector (f12) to find out what html elements are used to build the widget. In this case, no <label> element, but <value> elements.

6

Another related question on this - thanks for the update previously adding the wrap property. Currently (unless I've missed something) I cannot force the wrap to happen between words.

I'm looking for the opposite of word-wrap:break-word;

My css is currently:
label { color: #2dcf7a; word-wrap: normal; justify-content: flex-end; font-size: 150%; padding-left : 50px }

If I add
white-space: pre-wrap
I lose the padding-left behaviour.

7

word-break: normal

8

Resolved it:

I've put the following in the container that holds all the buttons, and removed all the CSS each button.
label { color: #2dcf7a; justify-content: flex-end; font-size: 150%; padding-left : 050px; white-space: pre-wrap; }

But crucially it only works if I make sure that the wrap text check box in the button properties is unchecked.

9

Did you try the solution above with wrap to true ?

10

Just tried it - thanks that also works - obviously need to set the wrap condition to true in each button

11

how do i get spacing to be bigger between lines?
Screen Shot 2021-12-26 at 5.45.49 PM

12