头条字体大小自动适应宽度_网站&服务器&网络安全_产品知识库

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

来源：网络点击数：次发布时间：2022年04月19日

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

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

思路：

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

"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";

}