如何计算中文、英文、数字、空格的字符像素宽度？js、asp问题向大侠求助！！

<html>
<head>
<style type="text/css">
</style>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<title>TEST</title>
</head>
<LINK rel="stylesheet" href="../css/table.css" type="text/css" id="_HPB_TABLE_CSS_ID_">
<script type="text/javascript">
function SC(){
document.FMlog.txt1.value
document.getElementById("p1").innerHTML = document.FMlog.txt1.value;
//alert(document.FMlog.txt1.value);
alert(document.getElementById("p1").offsetWidth);
}
</script>
</head>
<body bgcolor= "#ffffff">
<form method="post" action="" name="FMlog">
<input name="txt1" type="text" />
<input name="btn1" type="button" onclick="SC()" value="click me"/>
<span id="p1"  style="visibility:hidden"></span>
</form>
</body>
</html>

解决方案 »

  1.   

    计算字符串字节数，1个中文2字节
    function sumStr(str) 
      {var num=str.length；
       var arr=str.match(/[^\x00-\x80]/ig)；
       if(arr!=null)
         num+=arr.length；
       return num；
      } 
    sumStr("aavb 你好　啊!")
      

  2.   

    哦，上边code中事例函数调用应该这样：alert(sumStr("aavb 你好　啊!"))
      

  3.   

    像素宽度？那么1楼的方法就可以了啊！至于连续的E文空格只计算一个，这是正常的，因为HTML中连续的多个空格只占1个空格的现实位置
      

  4.   

    把字符串里的空格用&nbsp;代替即可
      

  5.   

    1楼的innerHTML改成innerText就可以区分空格了
    另外 如果你只是不想文本超过TD的宽度 大可以加个<div>标签
    例如:
    <td width="160">
    <div style="overflow-x:hidden;width='100%'">你要的内容</div>
    </td>
    这样你的TD内容一旦超过显示范围就会被隐藏.
    如果你还想看到其中的内容的话可以这样写
    <td width="160" valign="top" align="left">
    <div style="overflow-x:hidden;width='100%'" onmouseover="this.style.position='absolute';this.style.overflowX=''" onmouseout="this.style.position='';this.style.overflowX='hidden'">
    </td>
      

  6.   

    不好意思还没写完就按错键
    <td width="160" valign="top" align="left">
    <div style="overflow-x:hidden;width='160'" onmouseover="this.style.position='absolute';this.style.overflowX=''" onmouseout="this.style.position='';this.style.overflowX='hidden'"></div>
    </td>
    这样你的鼠标一移到文字上面 就会显示出之前没显示出来的内容
    鼠标一移开就会自动隐藏注如果用这个的话 可能 要稍微调下表格单元的高度
      

  7.   

    gzdiablo()你好！你这个方法确实好，可以解决版面被破坏的问题，不过我怎么没有搞定，是不是你那里还写错了？我样式不是很熟请麻烦再讲一下，谢谢！
      

  8.   

    <table border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
      <tr>
    <td width="160">
    <div style="overflow-x: hidden;width: 100%;">你要的内容你要的内容你要的内容你要的内容</div>
    </td>
     </tr>
    </table>
    超过宽度时还是一无反顾地换了行，没有隐藏呀！？
      

  9.   

    不好意思错了一点点 <div>的宽度必须是个定值 不能是百分数
      

  10.   

    <table border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
      <tr>
    <td width="160">
    <div style="overflow-x: hidden;width: 160px;">你要的内容你要的内容你要的内容你要的内容</div>
    </td>
     </tr>
    </table>
    兄弟是这样吗？不行哦：(
      

  11.   

    奇怪了 我这样没问题的哦
    <table  border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td width="160"><div style="overflow-x:hidden;width:160px">fasfsdaasdfasdfasdffsadfsasdfsadfasdfadfasdfsdfsdfasdf</div></td>
        <td width="160">&nbsp;</td>
      </tr>
    </table>
      

  12.   

    这样写也没错你是什么问题?
    <table border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td width="160"> <div style="overflow-x:hidden;width:160px">fasfsdaasdfasdfasdffsadfsasdfsadfasdfadfasdfsdfsdfasdf</div> </td>
      </tr>
    </table>
      

  13.   

    哦知道了 你加个nowrap
    这样写
    <table border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
      <tr>
    <td width="160">
    <div nowrap style="overflow: hidden;width: 160px;">你要的内容你要的内容你要的内容你要的内容</div>
    </td>
     </tr>
    </table>
      

  14.   

    <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
    <table border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td nowrap><div style="overflow-x:hidden;width:160px" onmouseover="this.style.position='';this.style.overflowX=''" onmouseout="this.style.position='';this.style.overflowX='hidden'">你要的内容你要的内容你要的内容你要的内容</div></td>
    <td width="160">&nbsp;</td>
    </tr>
    </table>
    要这样写，因为TD元素noWrap属性的行为与TD元素的width属性有关。◆如果未设置TD宽度，则noWrap属性是起作用的。
    ◆如果设置了TD宽度，则noWrap属性是不起作用的。
    用div控制160像素，用td控制不能自由换行
      

  15.   

    楼上的请注意 DHTML 里面是这么说的Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario.If a td element has its noWrap set to true and the WIDTH attribute of its table element is set to a smaller dimension than the rendered content of the td element, wordwrap does not occur. In this case, the noWrap setting takes precedence over the WIDTH attribute.也就是说只有TD元素设置了宽度才会发生这种情况
    而我加noWrap的元素是DIV所以不会产生此类问题