Format text in a menu widget

Community Usage questions
1

Is there a way to format the text in a menu widget? I have a long string that has two or three words, then a hyphen, then more words. I want to new line the string at the hyphen so that the first words form a title in each boxk and the remaining words go below and are wrapped in each menu box.

I assume in part I can do some of it with css but I can't seem to get it to work.

2

\n or <br/> in the string should enforce a new line.

3

Thanks, still not quite sure how to implement this though.

I currently build the items in the menu using this:

const scaleList = Object.values(musicalVariable.scales).map(scale => `${scale.scaleName} - ${scale.scaleCharacter}`);

Which draws from a variable

const musicalVariable = {
    scales: {
        majorScale: {
            countKeys: 7,
            keys: [0, 2, 4, 5, 7, 9, 11],
            scaleName: "major",
            keysUpDn: [0, 2, 4, 5, 7, 9, 11, 9, 7, 5, 4, 2, 0],
            scaleIntUp: [2, 2, 1, 2, 2, 2, 1],
            scaleIntDn: [1, 2, 2, 2, 1, 2, 2],
            scaleIntUpDn: [2, 2, 1, 2, 2, 2, 1, 1, 2, 2, 2, 1, 2],
            relativeNoteCOffset: 0,
            isMode: false,
            scaleCharacter: "\n The major scale is bright, happy, and uplifting, often used in various genres of music including pop, classical, and jazz. It forms the basis for many harmonic and melodic structures."
        },

//way more scales below this...

You can see that the scaleList is built using the code above to become major - \n The major scale is bright, happy, and...etc and I have successfully populated the menu with scaleList from my custom module using a listener in the values field of the widget
image

But this seems to ignore the \n

4

Try with <br/> instead then.

5

Indeed I have - sort of works, will report back shortly... Thanks for all your ongoing support!

6

On a related question then - does that mean I can add all sorts of html tags to format the menu text?

7

Here is the solution - as always thanks to @jean-emmanuel for pointing me in the correct direction...

const scaleList = Object.values(musicalVariable.scales).map(scale => `${scale.scaleName} - ${scale.scaleCharacter}`);

The key was in the above expression. I have changed the " - " character in this to <br/><br/> and now I have this...

image