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

学习了 😉

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。