Dynamic text font or scale size based on value from XML

Hi,

I am working with HTML5 canvas.

I need to change the font size or the scale size of the dynamic text, based on value which i get from XML file. For example, I have set

By default font size is 25px, because the placeholder have only one word "Hello"

this.textFIeld.font = '25px';

But as soon as i get longer text from XML, example "Lorem Ipsum Dolorem Sit, Lorem Ipsum Dolorem Sit"

with font size 25px, it destroy the design, and it' overlay the background(grey background) where the text needs to fit.

I tried to dynamic change font, but then I need to change the line height. When I do both, they never look properly as they should, plus it's not cross browser compatible, firefox have issues Text Alignment issues with Firefox · Issue #650 · CreateJS/EaselJS · GitHub

If I fix this, there are some other things to be fixed. So what I need is a cleaner way to do this. Maybe there is an actually easy way to do this.

Thank you