javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示

产品提了一个小需求，希望一行能展示用户输入的所有文字，因为最多限制为25字符，但是如果夹杂英文/韩文/日文等，即使字符数是一样的，但是展示的长度不一样，则有些title标题会被截断。

效果如图

前提是总字数有一个差不多展示一行的最大限制，否则文字太小，也不能保证正常展示。

.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,让文字最后显示三个点。

多行文字自适应看这里

 

注意：由于是单行文本，超出缩小字体到不能缩小的时候显示三个点，所以要默认给该行元素加一个class

.line_nowrap{

white-space:nowrap;

}，

限定文本不换行，当字体缩小到一定大小，不能再缩小，依然超出的时候，添加 .lineClamp1 class,增加三个点，但此时由于加了不换行的属性，三个点是不能展示的，这时候还需要去掉不换行class.

这里有个疑问，亲测发现

Size减小的同时，size所在的div和size外层的div都会减小，所以这里用了

document.getElementById("titleBox").offsetWidth
来获取最新的文字所在的盒子宽度。

 

转载于:https://www.cnblogs.com/beileixinqing/p/9804560.html