javascript - 溢出时调整字体大小以适合内容

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>