js中，如何计算一个字符串宽度？

2013-07-04

js中，怎么计算一个字符串宽度？？我从后台传到页面一个对象，从这个对象中获取一个字符串。根据这个对象动态填

js中，怎么计算一个字符串宽度？？
我从后台传到页面一个对象，从这个对象中获取一个字符串。根据这个对象动态填充一个div，但是有些属性的内容过长，需要做换行处理。

现在是想获取这个字段的宽度，如果过长就换行。

求解。
[解决办法]
http://bbs.csdn.net/topics/300032210，算一下单个字符的长度，然后。。。。
[解决办法]
js获取字符串的长度很简单吧就是字符串的一个属性
[解决办法]
楼主说的宽度。width么？
字符串在什么标签内？
[解决办法]
用个visibility:hidden的浮动的层来计算，浮动层的样式设置成和你的容器样式一样

<style>
.content{font-size:20px}
#dvCompute{position:absolute;visibility:hidden;}
</style>
<div class="content" id="dvCompute"></div>
<script>
    function Compute(v) {
        var d = document.getElementById('dvCompute');
        d.innerHTML = v;
        return { w: d.offsetWidth, h: d.offsetHeight };
    }
    window.onload = function () {
        var p = Compute('要计算的内容aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>123132');
        alert(p.w + '\n' + p.h);
        var p = Compute('要计算的内容aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>123132<br/>123132');
        alert(p.w + '\n' + p.h);
    }
</script>

[解决办法]
单纯文本应该很难，如果在标签内还能想想办法。
[解决办法]

引用:

用个visibility:hidden的浮动的层来计算，浮动层的样式设置成和你的容器样式一样

<style>
.content{font-size:20px}
#dvCompute{position:absolute;visibility:hidden;}
</style>
<div class="content" id="dvCompute"></div>
<script> 
 
    function Compute(v) {
        var d = document.getElementById('dvCompute');
        d.innerHTML = v;
        return { w: d.offsetWidth, h: d.offsetHeight };
    }
    window.onload = function () {
        var p = Compute('要计算的内容aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>123132');
        alert(p.w + '\n' + p.h);
        var p = Compute('要计算的内容aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>123132<br/>123132');
        alert(p.w + '\n' + p.h);
    }
</script>

还是版主牛X, 不过好象有css 样式可以很简单地做到
[解决办法]

引用:

用个visibility:hidden的浮动的层来计算，浮动层的样式设置成和你的容器样式一样

<style>
.content{font-size:20px}
#dvCompute{position:absolute;visibility:hidden;}
</style>
<div class="content" id="dvCompute"></div>
<script>
    function Compute(v) {
        var d = document.getElementById('dvCompute');
        d.innerHTML = v;
        return { w: d.offsetWidth, h: d.offsetHeight };
    }
    window.onload = function () {
        var p = Compute('要计算的内容aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>123132');
        alert(p.w + '\n' + p.h);
        var p = Compute('要计算的内容aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>123132<br/>123132');
        alert(p.w + '\n' + p.h);
    }
</script>

+
[解决办法]

引用:

用个visibility:hidden的浮动的层来计算，浮动层的样式设置成和你的容器样式一样

<style>
.content{font-size:20px} 
 
#dvCompute{position:absolute;visibility:hidden;}
</style>
<div class="content" id="dvCompute"></div>
<script>
    function Compute(v) {
        var d = document.getElementById('dvCompute');
        d.innerHTML = v;
        return { w: d.offsetWidth, h: d.offsetHeight };
    }
    window.onload = function () {
        var p = Compute('要计算的内容aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>123132');
        alert(p.w + '\n' + p.h);
        var p = Compute('要计算的内容aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>123132<br/>123132');
        alert(p.w + '\n' + p.h);
    }
</script>

版主还是强。。
[解决办法]

引用:

单纯文本应该很难，如果在标签内还能想想办法。

基本不可能, ie 和火狐,相同字体可能宽度都不一样

创建一个div,宽度auto,把字符串扔进去,用js 获取该div宽度,
或宽度设置成固定(你需要的宽度),行高要控制好,来获取div高,除以行高就是几行了,

热点排行

JavaScript

js中，如何计算一个字符串宽度？