javascript实现一行文字随不一样设备自适应改变字体大小至字数彻底展现
产品提了一个小需求，但愿一行能展现用户输入的全部文字，由于最多限制为25字符，可是若是夹杂英文/韩文/日文等，即便字符数是同样的，可是展现的长度不同，则有些title标题会被截断。html
效果如图web
前提是总字数有一个差很少展现一行的最大限制，不然文字过小，也不能保证正常展现。字体
.lineClamp { overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; }
<div id="titleBox"> <div class="title" id="title"> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈 </div> </div>
//title字体大小自适应，以能彻底在一行显示25个不一样类型的字符。 function fontAuto() { let titleBox = document.getElementById("titleBox"); let title=document.getElementById("title"); let size=4; title.style.fontSize = size + 'vw'; let scrollWidth=title.scrollWidth; while (title.scrollWidth > document.getElementById("titleBox").offsetWidth) { scrollWidth=title.scrollWidth; //当容器高度大于最大高度的时候，上一个尝试的值就是最佳大小。 size=size-0.2; title.style.fontSize = size+ 'vw'; if(scrollWidth<=title.scrollWidth){ $("#title").addClass("lineClamp1");
$("#title").removeClass("toh");
break;
}
}
}
fontAuto();
思路：因为不一样移动设备的分辨率不一样，这里给font-size用的单位为vw,默认设置一个当前字体的font-size，获取到文字外层容器的宽度，判断文字的宽度是否大于容器的宽度，若是大于，则给当前的font-size减少0.1vw，若是px同理，能够按减少1px计算，而后成功，若是在一些小屏幕设备上，字体小到必定大小达到极限，不会继续减少，则始终跳不出循环，这时加一个class,让文字最后显示三个点。spa
多行文字自适应看这里code
注意：因为是单行文本，超出缩小字体到不能缩小的时候显示三个点，因此要默认给该行元素加一个classorm
.line_nowrap{htm
white-space:nowrap;
}，blog
限定文本不换行，当字体缩小到必定大小，不能再缩小，依然超出的时候，添加 .lineClamp1 class,增长三个点，但此时因为加了不换行的属性，三个点是不能展现的，这时候还须要去掉不换行class.ip
这里有个疑问，亲测发现rem
Size减少的同时，size所在的div和size外层的div都会减少，因此这里用了
document.getElementById("titleBox").offsetWidth来获取最新的文字所在的盒子宽度。