js判断字符的宽度

        需求背景:根据文字的内容设置元素的宽度,但是中文和英文的宽度不一样,所以遍历字符串,如果是中文,长度加2,

如果是英文,长度加1。因此,做此笔记。

方式一:

function strLen(str) {  
  var len = 0;  
  for (var i=0; i<str.length; i++) {  
    if (str.charCodeAt(i)>127 || str.charCodeAt(i)==94) {  
       len += 2;  
     } else {  
       len ++;  
     }  
   }  
  return len;  
}

方式二:

function strlen(str){
    var len = 0;
    for (var i=0; i<str.length; i++) { 
        var c = str.charCodeAt(i); 
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { 
           len++; 
        } else { 
           len+=2; 
        } 
    } 
    return len;
}

方式三:

function strLen(str){
    var l = str.length; 
    var blen = 0; 
    for(i=0; i<l; i++) { 
        if ((str.charCodeAt(i) & 0xff00) != 0) { 
            blen ++; 
        } 
        blen ++; 
    }
}

方式四:

function strLen(str) {
  if (str == null) return 0;
  if (typeof str != "string"){
    str += "";
  }
  return str.replace(/[^\x00-\xff]/g,"01").length;
}

 

在UniApp中,判断一个容器内字符宽度是否大于容器的实际宽度,通常需要先了解文本的字体、字号以及字符间距等因素。然而,由于HTML5的`clientWidth`属性只返回可视区域宽度,我们无法直接得到单个字符的实际宽度。因此,一种间接的方法是预估或者计算字符宽度,例如基于字体的固定像素宽度(如宋体或雅黑),或者是通过CSS设置固定的字符间距。 如果你有一个固定的字体和字号,并且可以控制字符间距,比如: ```css .text-container { font-family: Arial, sans-serif; // 假设是Arial字体 font-size: 16px; letter-spacing: 1px; // 假设每个字符间有1px的间距 } ``` 那么你可以计算出一个平均字符宽度,例如16px + 1px。然后在JavaScript里,你可以测量容器的宽度,并除以这个估算的字符宽度判断是否需要换行: ```javascript const measureTextWidth = function(text, charWidth) { const lineWidth = this.selectComponent('#container').clientWidth; return text.split('').reduce((total, char) => total + charWidth, 0) > lineWidth; }; // 使用时: if (measureTextWidth(this.data.text1, 字符宽度)) { // 文本需要换行... } ``` 请注意,这种方法依赖于静态的字符宽度估计,对于复杂布局(如行间距或字形变形),结果可能不准确。如果你能获得更精确的信息,如通过API或其他方式获取到每个字符的真实宽度,那就更为理想了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值