头条字体大小自动适应宽度_前端技术_日志_DTOP

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

来源：本站原创发布时间：2022-04-12 08:48:20 浏览次数：次【字体：小大】

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

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

思路：

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

<script language="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";

}

</script>