字体大小自动适应DIV--亲自测试有效-tomcat

发布时间 2023-08-26 08:58:37作者: 斯斯20222
<!DOCTYPE html>
<html>
    <head>
        <title>phone 设计</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    </head>
    <body>
<div style=" width:900px; height:500px; overflow:hidden; font-size:12px;" id="str">文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小</div>
</body>
</html>
    <script language="javascript">

    window.onload = function(){
            var str=document.getElementById("str");
    var fontw=12; //初始的字体大小
    var fonth=fontw+2;//初始字体高度
    var width=str.offsetWidth;//DIV的宽度
    var height=str.offsetHeight;//div的高度
    var lenstr=str.innerHTML.length;//DIV里文字长度
    fonts=fontw*fonth*lenstr;//字体面积
    divs=width*height;//DIV面积
    //if(fonts>divs){
    var rfont;//重设字体大小为rfont
    rfont=Math.round((Math.sqrt(4*lenstr*divs-4*lenstr*lenstr)-2*lenstr)/(2*lenstr));
    str.style.fontSize=rfont+"px";
    //}
    }
</script>