调整字体大小以适应溢出时的内容

Question

我希望在文本溢出容器时调整文本大小以适应内容。 相同的容器具有相同的宽度和高度，但如果容器溢出，则文本会更少。

我搜索了很多jquery插件，但插件仅在宽度容器调整大小时调整文本大小...

Answer 1

你可以运行\wamp\wampmanager.ini循环直到内部元素的高度小于父元素，如下所示：

http://jsfiddle.net/yod3s5vm/3/

＆＃13;

＆＃13;

while

＆＃13;

var intMainHeight = $('#main').height();
var intTextHeight = $('#text').height();
var intFontSize = parseInt($('#text').css('font-size'));
while (intTextHeight > intMainHeight) {
    --intFontSize;
    $('#text').css('font-size', intFontSize+ 'px');
    intMainHeight = $('#main').height();
    intTextHeight = $('#text').height();
}

＆＃13;

* {
    box-sizing:border-box;
}
#main {
    height:200px;
    width:400px;
    border:1px solid black;
    padding:5px;
    background:#eee;
}
#text {
    font-size:30px;
}

＆＃13;

＆＃13;

＆＃13;