JavaScript自适应调整文字大小
2017-04-07 00:00
211 查看
JavaScript自适应调整文字大小
今天有个任务,发现页面上的数字由于太长而与其他数字重叠了。这个数字还不能像文字那样只显示一部分,必须全部显示。想了一些办法都不行,最后把超过1000变成1K,大于K改成M,这样办法都行,还是长呀。注意:我这个任务不是在不同屏幕下文字大小调整,而是同一种屏幕下调整字体大小。
在网上还找到了一种方法https://www.zhuwenlong.com/blog/article/528611f363c705fc73000001,但是没有使用。
同时又去试了一下svg是否可以自动调整文字大小,发现不行(可能是我没搞清楚,如果把SVG当成一个图片可能好使)。
最后想了一个办法,根据数字的长度动态修改文字的大小。系统使用AngularJS写的。所以在controller.js中设定了一个$scope.myStyle的样式,并且把样式放在div上:
<div ng-style="myStyle">...</div>
然后在controller.js中判断字符串长度。首先先把数字变成字符串并且都连接在一起,然后判断最终的字符串长度。
示例:
if(text_length <= 6) { $scope.myStyle = { "font-size": "34px", } } else if(text_length <= 8) { $scope.myStyle = { "font-size": "32px", } } else if(text_length <= 10) { $scope.myStyle = { "font-size": "30px", } } else if(text_length <= 12) { $scope.myStyle = { "font-size": "26px", } } else if(text_length < 18) { $scope.myStyle = { "font-size": "22px", } } else { $scope.myStyle = { "font-size": "20px", } }
最后的显示效果还可以,不过调试的过程要自己慢慢调。:D
@完
相关文章推荐
- JavaScript自适应调整文字大小
- JavaScript自适应调整文字大小
- javascript 文字大小自动适应文本框 (文字大小自动调整)
- 固定textview大小,根据文字多少调整字体自适应textview大小
- office技巧——编号与文字之间的空白大小调整
- javascript处理不同分辨率下文字大小的方法
- Jquery DIV+javascript自适应大小窗口
- javascript实现div的拖动并调整大小
- Javascript 动态编程--动态设置网页元素是否可见,是否可用,改变大小,动态插入文字,进度条,动态改变背景例子
- 自动改变文字大小和颜色的javascript效果
- 适用于IE的自适应大小并且自动居中的对话框页面(javaScript)
- javascript控制图片自适应大小
- IOS UILabel自适应里面的文字,自动调整宽度和高度的
- ios 文字 控件 自适应 高度 宽度 CustomCell 自适应高度+uilabel自动换行+ UITextView 根据内容自动调整高度
- javascript实现div的拖动并调整大小类似qq空间个性编辑模块
- javascript控制图片自适应容器大小
- 用javascript调整页面内图片的大小
- 使用javascript 不能调整windows的大小
- windows mobile 6.0系统中自己制作的今日插件,通过“开始-设置-系统-屏幕-文字大小”调整文字大小后,插件上的文字大小不改变!
- javascript控制图片自适应大小