如何获得获得Web页面上的字符串的像素宽度

在做web应用开发时，有可能需要计算出字符串在页面上所占的宽度，从而正确的调整页面的布局。

比如，当我们需要在有限的空间内显示动态变化的字符串时，当字符串表示宽度超过有限空间时，要么缩小字体来表示，要么截断字符串来表示。

 

以下给出了一个获取字符串表示宽度，和截取字符串的方法：

需要注意的是，必须保证span控件的字体和即将放置字符串的控件的字体保持一致，同时span控件必须设置为占据空间的（style.display不能为none）。

1. 添加一个span控件用来暂存字符串；

<span id="ruler"></span>

 

2. 设置span控件的css属性

#ruler { visibility: hidden; white-space: nowrap; } //nowrap:禁止文字自动换行

 

3. 获取字符串的表示宽度

function $(id)
{
    return document.getElementById(id);
}

String.prototype.visualLength = function()
{
    var ruler = $("ruler");
    ruler.innerHTML = this;
    return ruler.offsetWidth;
}

 

4. 截取字符串

String.prototype.trimToPx = function(length)
{
    var tmp = this;
    var trimmed = this;
    if (tmp.visualLength() > length)
    {
        tmp = tmp.substring(0, tmp.length-1);
        if(tmp == "") {
            return ""; // Return empty string
        }
		
        trimmed = tmp + "…";
        while (trimmed.visualLength() > length)
        {
            tmp = tmp.substring(0, tmp.length-1);
            trimmed = tmp + "...";
        }
    }
    
    return trimmed;
}

 

详细参见：

Measuring the length of a string in pixels using JavaScript