Text wrapping in ribbon buttons

[Igor Kuchaev]

Hello!

I have an issue with Ribbon Javascript Control. I can't find any proper information on how to achieve the following effect.

I need to make text wrapping or two lines of text for the ribbon buttons, when the text has not enough space. The way to add line or &codes doesn't help to achieve this effect. 

Thanks in advance,

Regards,

Igor

[Kavitha Narayanan]

Hi Igor,

Thanks for contacting Syncfusion support.

Query: I need to make text wrapping or two lines of text for the ribbon buttons, when the text has not enough space.

By default, text wrapping applies to the button text when we give more than one line of text and it fixed in the 14.1.0.41 version. For proper alignment of text and icon, we can customize button width and height as per your requirement.

Please refer to the code.

text: "Illustrations", alignType: ej.Ribbon.AlignType.Rows, content: [{

groups: [{

id: "picture",

text: " Online Pictures", //text wrapping to the ribbon button

toolTip: "Pictures",

buttonSettings: {

height:85,//set button for proper align of text and icon

contentType: ej.ContentType.TextAndImage,

imagePosition: ej.ImagePosition.ImageTop,

prefixIcon: "e-ribbon e-picture"

}
},
}]

We prepared a sample in 14.1.0.41 version.

Sample: http://www.syncfusion.com/downloads/support/forum/123681/ze/sample-749932459.zip

Video: http://www.syncfusion.com/downloads/support/forum/123681/ze/video-518325733.zip

Regards,
Kavitha N.