固定宽高的元素，字体大小随字体数量动态改变

思路

先把文字插入一个元素中，获取文字所占的面积。
然后根据其面积与想放入元素的面积做对比，可以求出一个缩放比例。
根据比例生成一个dom并放入该文字，最后插入想要的元素中。

代码

html

<div class="box"></div> 

css

.box{
	width:100px;
	height:50px;
}

js

/*
* str 文字 
* w 盒子宽度 
* h 盒子高度 
* fontSize 字体大小 
* 根据文字多少生成等比例缩放生成的元素 
* */ 
var createDomFromFont = function (str,w,h,fontSize) { 
    let area = w * h;//外层盒子面积 

    $('body').append($(``)); 
    let dom = $('#getBoxSizeFromFont'); 
    let domArea = dom[0].offsetWidth * dom[0].offsetHeight; //获得文字所占面积 
    dom.remove(); 

    let itemStyle = `display: inline-block;word-break: break-all;font-size: ${fontSize}px`; 
    if(domArea > area){ 
        var itemW = Math.sqrt(domArea * w / h);//要缩放盒子的宽度 
        var scale = w / itemW;//缩放比例 
        itemStyle += `width:${itemW}px;transform-origin: left center;transform:scale(${scale})`; 
    } 
    return `<div style="${itemStyle}">${str}</div>`; 
};

$('.box').html(createDomFromFont('这是一个例子',100,50,20));