SPAN
<span id="adaptiveFontSize">2409:891e:6920:2b93:4d49:4c44:bea7:d109</span>
<!--span id="adaptiveFontSize">13.254.77.124</span-->JS
<script>
var adaptiveFontSize = document.getElementById('adaptiveFontSize');
var adaptiveFontSize = adaptiveFontSize.innerText; //获取 span adaptiveFontSize 里面的所有字
var fontLength = adaptiveFontSize.length; //转换为字数
if(fontLength >= 16) //如果 span adaptiveFontSize 里面字符大于或者等于设定值
{
document.getElementById("adaptiveFontSize").style.fontSize=1.0+'em';//如果字符大于或者等于 fontLength 值，字体大小则为 1.0em；
}
else{
document.getElementById("adaptiveFontSize").style.fontSize=1.5+'em';//否则字体大小为 1.5em，也是默认值；
}
</script>HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 判断字符内容长度自适应缩小字体</title>
</head>
<div id="contentOutput">
<span id="adaptiveFontSize">2409:891e:6920:2b93:4d49:4c44:bea7:d109</span>
<!--span id="adaptiveFontSize">13.254.77.124</span-->
</div>
<script>
var box = document.getElementById('contentOutput');
var box = box.innerText; //获取 div contentOutput 里面的所有字
var cat = box.length; //转换为字数
if(cat >= 16) //如果 contentOutput 里面字数大于或者等于设定值
{
document.getElementById("adaptiveFontSize").style.fontSize=1.0+'em';//字符大于 15 个字体大小设置为 1.0em
}
else{
document.getElementById("adaptiveFontSize").style.fontSize=1.5+'em';//否则字体大小设置为 1.5em
}
</script>
</body>
</html>
友情提示：本站所有文章，如无特殊说明或标注，均为何星星原创发布。与此同时，趋于近年来本站的文章内容频繁被他站盗用与机器采集，现已全局禁用网站文字内容操作，了解详情或转载文章请 点此 继续！
1 条评论
tinwa · 2021年12月26日 21:30
学习了 😉