如何获取字符的px值。真的要用到

Question

字节数是1比2 屏幕上占的地方不是1：2啊  不同的电脑上  无法确定几个中文几个英文够一行中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中57个
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa103个

Answer 1

用一个div来模拟textarea的宽度，设置字体大小一致来计算textarea每行的内容是否会出现换行<style>
textarea.count,div.count{margin:0px;padding:0px;border:solid 1px #000;font-size:14px;font-family:宋体;width:110px;word-wrap:break-word;line-height:20px;}
div.count{position:absolute;left:-999999999px}/*计算的div移除视窗外*/
</style>
<div class="count" id="dv"></div>
<textarea id="ta" cols="10" class="count">1111333333
不支持不支持不支持
111133333331
3333</textarea><script>
    var num = 10
    window.onload = function () {
        var v = document.getElementById('ta').value, arr = v.replace(/\r/g, '').split('\n')
        , dv = document.getElementById('dv'), lh = 20, row;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].length > num) {
                alert('第' + (i + 1) + '行超过' + num + '字符')
            }
            else {
                dv.innerHTML = arr[i];
                row = Math.ceil((dv.offsetHeight - 2) / lh);
                if (row > 1) {
                    alert('第' + (i + 1) + '行实际占用' + row + '行显示')
                }
            }
        }
    }
</script>

Answer 2

if (row > 1) {
                    alert('第' + (i + 1) + '行实际占用' + row + '行显示')
                }这里增加你的总行数啊。。我只是没加总行数计算而已<style>
textarea.count,div.count{margin:0px;padding:0px;border:solid 1px #000;font-size:14px;font-family:宋体;width:110px;word-wrap:break-word;line-height:20px;}
div.count{position:absolute;left:-999999999px}/*计算的div移除视窗外*/
</style>
<div class="count" id="dv"></div>
<textarea id="ta" cols="10" class="count">1111333333
不支持不支持不支持
111133333331
3333</textarea>
 
<script>
    var num = 10, total = 0;
    window.onload = function () {
        var v = document.getElementById('ta').value, arr = v.replace(/\r/g, '').split('\n')
        , dv = document.getElementById('dv'), lh = 20, row;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].length > num) {
                alert('第' + (i + 1) + '行超过' + num + '字符');
            }
            ///计算textarea \n分隔的数据实际显示的行数
            dv.innerHTML = arr[i];
            row = Math.ceil((dv.offsetHeight - 2) / lh);
            if (row > 1) {
                alert('第' + (i + 1) + '行实际占用' + row + '行显示')
            }            total += row;///////////        }        alert('显示总行数：' + total+'\n\ntextarea \\n分隔的实际行数：'+arr.length);
    }
</script>