How to make the text content auto fill all the space of its parent element

Question

I have a div,which content some text content.

<div id="con" style="position:absolute;left:50px;top:50px;border:1px solid red;font-size:12px;">
    Text Here!
</div>

Note,that I do not set the "width" and "height" of the "div#con",since I do not want to see any blank space.

Now,I want to make the "div#con" resizeable,when the "div#con" resize,I want the text's fontsize inside it changed accordingly.

Any idea?

What do you want the behavior to be when someone resizes to 100px high and 1px wide? you can dynamically resize the text but you can't scale it in any way that will work in all browsers. — Ali, Sep 01 '11 at 09:56

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

Have a look at the jQuery TextFill plugin and also to this topic with severals solutions.

I think you should find the answer.

edited May 23 '17 at 12:22

Community

answered Sep 01 '11 at 09:21

Jean-Charles

1

charles The 100% refers to the default font size set in the browser of the user. If the default font size of the browser is set to 10px then 100% means set the font to 10px. 110% would mean 11px. So this won't work. – Ali Sep 01 '11 at 09:59
Since we have use the prototype in our page,so I wonder if I can use the native script to implement this? – hguser Sep 01 '11 at 13:00
BTW,this plugin make the text size changed according to the length of the text within a fixed container,while what I want is make the text size changed according to the container whose size will be changed. – hguser Sep 01 '11 at 13:04

1 Answers1