专栏首页前端小叙javascript实现一行文字随不同设备自适应改变字体大小至完全展示

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

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

效果如图

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

<div id="titleBox">
         <div class="title" id="title">
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈
        </div>
</div>
//title字体大小自适应,以能完全在一行显示25个不同类型的字符。
    function fontAuto() {
        let titleBox = document.getElementById("titleBox");
        let maxWidth = titleBox.offsetWidth;
        let title=document.getElementById("title");
        let size=4;
        title.style.fontSize = size + 'vw';
        while (title.scrollWidth > maxWidth) {
            //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。
            size=size-0.2;
            title.style.fontSize = size+ 'vw';
        }
    }

思路:由于不同移动设备的分辨率不同,这里给font-size用的单位为vw,默认设置一个当前字体的font-size,获取到文字外层容器的宽度,判断文字的宽度是否大于容器的宽度,如果大于,则给当前的font-size减小0.1vw,如果px同理,可以按减小1px计算,然后成功。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示

    蓓蕾心晴
  • 手机端调用系统相册并上传图片

    css: 1 .upload-img{ 2 width:80%; 3 position:fixed; 4 top:50%; 5...

    蓓蕾心晴
  • 为什么setinterval和settimeout越点击越快以及响应的解决办法

    setinterval大家都很了解,但是如果时间长的话,误差也会越来越大,所以我习惯上使用settimeout的递归,闲来没事,写了一个定时器的递归

    蓓蕾心晴
  • PHP正则获取网站标题、关键字、描述

    公司的网站主要是利用优化获取流量,工作的时间久了,慢慢的也在接触seo,利用自己的能力做一些小的工具去分析同行业网站的优化方案,其实也是在学习的过程。下面言归正...

    申霖
  • 模型部署实战:教你用笔记本电脑实现实时“口罩检测”

    最近百度飞桨在业内率先开源了口罩检测模型,并且在北京地铁实际上线。该模型能够准确地对未戴口罩以及错误佩戴口罩的情况进行识别和检测,辅助一线地铁工作人员进行防疫工...

    用户1386409
  • 手把手教你EMD算法原理与Python实现

    SSVEP信号中含有自发脑电和大量外界干扰信号,属于典型的非线性非平稳信号。传统的滤波方法通常不满足对非线性非平稳分析的条件,1998年黄鄂提出希尔伯特黄变换(...

    脑机接口社区
  • 手把手教你EMD算法原理与Python实现(更新)

    Rose今天主要介绍一下EMD算法原理与Python实现。关于EMD算法之前介绍过《EMD算法之Hilbert-Huang Transform原理详解和案例分析...

    脑机接口社区
  • 彻底理解零拷贝的原理以及Java代码的实现

    我们以用户通过网络读取一个本地磁盘上文件为例,在说零拷贝之前,我们先要说说一个普通的IO操作是怎样做的

    诺浅
  • WordPress 后台编辑文章页面添加自定义提示文字

    针对你的客户,你可能需要对WordPress 后台的编辑器做些个性化操作提示,比如说编辑的一些说明、注意事项等等。WordPress 中可以使用以下类似的代码实...

    Jeff
  • 关闭删库跑路的后门,打造高可用的MySQL

    数据是当今Web,移动,社交,企业和云应用程序的流行货币。确保数据始终可用是任何组织的头等大事。几分钟的停机时间可能会导致收入和声誉严重损失。

    JavaEdge

扫码关注云+社区

领取腾讯云代金券