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

Question

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

我搜索很多jQuery插件，但插件只能调整文本时宽度容器是在调整......

Answer 1

你可以做一个while循环运行，直到内部元件的高度比父元素更小，像这样：

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

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(); 
 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <div id="text"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </div>  
 
</div>