动易技术中心 /产品知识库/网站&服务器&网络安全

头条字体大小自动适应宽度

作者：动易软件 来源：网络 点击数： 次 发布时间：2022年04月19日

头条字号要自动适应，不换行，要在一行内显示完整，之前好像也有类似头条文字转图片的形式来满足这个需求。这里分享一下用js来判断字号大小。

效果如下，字数少时，字号大，文字多时，字号变小，达到一行显示效果。

思路：

通过获取标题的字数，然后用网站的宽度除以标题字数，得到字号大小值，再附加样式字号到标题上

0fb5ef8dd5c54e2e93420ae85c216ad3.png

7c57f4aa84d84173b6168c43a9ea6008.png





"javascript">

    var str=document.getElementById('str');//获取标题id
    var num=str.innerHTML.length
    var rfont=1200/num-1;//1200为网页的宽度
    if (rfont>=60) {
        str.style.fontSize=60+"px";
        } 
        else
        {
        str.style.fontSize=rfont+"px";
        }