html5控制字大小的代码,js根据字符串长度控制字体大小代码

使用js库: mootools

应用场景：有时需要在一行显示一个用户的昵称，但是由于昵称的长度不定，所以一旦规定死了font-size,就会出现自动换行等破坏页面美观的情况出现，那么在此种情况下我们可以先判断下字符串的“占空比”.

前端的节点信息:

=$weibo_uname?>

那么怎么计算所谓的占空比呢，因为会夹杂着出现中文和英文，但是如果仅仅计算 string.length是不可行的，因为 “我爱你中国”.length和’aaaaa’.length都是5，但是在页面所占的长度是不同的，那么应景的我们就需要计算得到一个字符串中包含中文的字数，一个函数

function cLength(str){

var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;

var temp = str.replace(reg,'');

return temp.length;

}

那么根据经验，一个中文占的长度是一个数字或者英文字母的两倍，此时我们就可以得到

function check_nick_name()

{

var myname = $$('[class=info-heading]')[0].innerHTML;//选择器读取字符串

var string_length = parseInt(myname.length);//总长度

var chinese = cLength(myname);//中文字数

var other = string_length - chinese;//英文或者数字数

var total_length = chinese*2+other;//中文字权重*2 ，算比例

//6 26px//我的比例，一行只能显示6个汉字，当7个字需要设置font-size为26px才能显示到一行

if(total_length>=12) {

var set_font_size = 26/(total_length/12);

$$('[class=info-heading]')[0].setStyle('font-size',set_font_size);//添加一个font-size属性

}

此时再页面的底部加上首次加载的渲染

window.addEvent('domready',function(){

check_nick_name();

});

就可以自动的完成调整了~

html5控制字大小的代码,js根据字符串长度控制字体大小代码相关推荐

前端面试：手写代码JS实现字符串反转
前端萌新面试:手写代码JS实现字符串反转前言因为做前年小红书的前端校招面试题,发现出现好几道关于字符串对象和数组对象的题目,说难不难,但突然要写的话一时想不起来,这不想着做个小总结. 首先明白字符 ...
linux终端字体大小6,[adminitrative][archlinux][setfont] 设置console的字体大小
电脑的分辨率高了之后,用命令行进入的时候,完全看不清楚,是否容易导致眼瞎. 第一步便把字体调大就成了很必要的操作. 使用一个命令能马上生效: setfont 使用配置文件 /etc/vconsole. ...
android 字体大小属于什么类型,聊聊 Android 中的字体大小适配
本篇文章已授权微信公众号 guolin_blog(郭霖)独家发布前言虽然去年写的一篇文章[一种非常好用的Android屏幕适配]就包含字体大小适配,但那篇文章讲的是根据不同屏幕尺寸来适配字体大小的 ...
html表单判断字符数,JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）...
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
css 所有字体大小,前端Web开发人员的CSS相对字体大小
在本文中,我们将看几种不同的方式,前端Web开发人员可以使用CSS操作其网页的字体. 网页设计中最大的混乱之一是由font-size属性造成的. 在CSS中,可以使用多个单元,这只会导致设计人员额外头 ...
php与js字符串长度怎么算,JS判断字符串长度的5个方法
主要介绍JS判断字符串长度的5个方法,并且区分中文和英文,需要的朋友可以参考下目的:计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: 代码如下: String.prototype.gb ...
java jlabel 字体大小_java – 如何更改所有私有JLabel的字体大小
我见过类似的问题,例如this,但在我的情况下,我有25个私有JLabel,我在声明时给出了一个值.我在构造函数中使用GridBagLayout将这些JLabel添加到JPanel.如果我按照链接中给 ...
JS判断字符串长度的5个方法
为什么80%的码农都做不了架构师?>>> 主要介绍JS判断字符串长度的5个方法,并且区分中文和英文,需要的朋友可以参考下目的:计算字符串长度(英文占1个字符,中文汉字占2个字 ...
js根据判断改变html字符串长度,JS获取字符串长度(包含汉字)的简单示例
这篇文章主要为大家详细介绍了JS获取字符串长度(包含汉字)的简单示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. 方法一: /** * * @p ...
js 适配手机端屏幕字体大小
通过js控制页面大小,字体大小 function setRootFontSize() {var width = document.documentElement.clientWidth,fontSiz ...

html5控制字大小的代码,js根据字符串长度控制字体大小代码

=$weibo_uname?>

html5控制字大小的代码,js根据字符串长度控制字体大小代码相关推荐

最新文章

热门文章