jquery textFill does not work on invisible elements

I try to adapt the size of a text inside a div that, in turn, is inside another div. In general and in a simplified way, I have the following:

html:

<div id="main"> </div>

css:

#main:{
    display:none;
    width: 100%;
    height: 50%;
}
.square-text:{
    width:100%;
    height: 120px;
}

js:

$("#main").append("<div class='square-text' ><h3>...algun texto...</h3></div>");
$(".square-text").textFill({changeLineHeight: true, innerTag: 'h3', maxFontPixels: 0});

However, when div # main is displayed, textFill has not produced any effect, but if it is on screen from the beginning it works.

I will greatly appreciate how to solve this! =)