`

如何获得获得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

分享到:
评论

相关推荐

    css截取字符串简单实例

    标题中提到的“css截取字符串”实际上是关于在Web前端开发中如何利用CSS的特性来实现文本截断的效果。在这里,CSS并非传统意义上的编程语言,它不具备直接截取字符串的功能,但它可以通过一些属性来控制文本的显示,...

    关于中gridview 字符串截取的方法

    通过设置CSS属性,例如宽度(width)、文本对齐(text-align)、溢出隐藏(overflow)、省略号显示(text-overflow)以及空白处理(white-space),可以使得超出设定宽度的字符串部分用省略号代替,而不影响页面布局...

    JavaScript技术在Web网页中的应用研究.pdf

    例如,Web浏览器窗口的宽度、高度等参数设计后,可对浏览器像素的高度、宽度等进行设置,在数据分析与处理的基础上,可对参数属性进行设计与优化。根据浏览器的位置,将浏览器定位在计算机屏幕中央,通过浏览器的...

    Web 部件的公共属性

    4. **网页上可见**(IsVisible): 这个属性决定了Web部件在浏览页面时是否可见。如果不想让Web部件显示在页面上,但仍然需要其提供数据给其他部件,可以通过隐藏它来实现。 5. **方向**(Dir): 根据文本的语言方向设置...

    table中的超长字符串用省略号表示的css样式

    为了保持表格布局的一致性,同时避免过长的字符串破坏布局,我们通常会使用CSS样式来控制这些超长字符串的显示方式,使其在超出单元格宽度时能够以省略号(...)的形式显示。 在CSS中实现文本溢出用省略号表示的...

    php gd库生成图片,只需要输入字符串,字数越多字体越小,水平垂直居中

    当输入的字符串长度增加时,为了保持图片尺寸不变,需要自动减小字体大小,使所有文字都能完整显示在图片内。 ##### 3. 水平垂直居中 为了提高图片的整体美观度,文字应处于图片的中心位置,无论文字长度如何变化,...

    HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

    HTML5 Canvas是现代Web开发中的一个关键特性,它允许开发者在网页上绘制图形,实现动态交互效果。在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中,作者深入探讨了如何利用Canvas技术来实现菜单项的...

    oracle查询blob字段照片(jpeg) 像素大小sql

    根据题目描述,'01B90166441358'这个十六进制字符串代表了一个358x441像素的JPEG图片。 解析步骤如下: 1. **提取高度**:从字符串中提取前两个字符'01B9',并将其转换为十进制表示图片的高度。这里的'01B9'等于十...

    c#复习题 Web复习题

    - VBScript支持多种运算符,包括算术运算符、比较运算符和字符串连接运算符。 - 字符串连接可以使用`&`运算符。 - 负数运算符`-`具有较高的优先级,通常高于乘法和除法运算符。 通过上述总结,我们可以清晰地...

    前端图片压缩base64后台还原图片

    1. **尺寸压缩**:通过调整图片的宽度和高度,使其适应网页需求,同时保持宽高比,降低像素数量。 2. **质量压缩**:利用JavaScript库(如`img-compressor.js`或`compressorjs`)对图片进行有损或无损压缩,降低图片...

    PHP实现图片转字符画1

    定义字符串变量`$strChars`存储字符画内容,设置默认字体`$strFont`,并使用`str_split()`函数将字符集分割到数组中。同时,初始化其他与参数相关的变量,如缩放比例`$iScale`、颜色开关`$bColor`、透明度`$bAlpha`...

    WEB前端大图片压缩并上传例子

    在大图片压缩的场景中,我们主要利用`toDataURL()`方法,它可以将Canvas的内容转换成Data URL,即一个包含图片数据的base64编码字符串。通过调整Canvas的大小,我们可以控制图片的压缩比例,从而实现图片的压缩。 ...

    js页面跳转方法

    * specs:一个字符串,用于设置新打开的浏览器窗口的属性。 例如: ```javascript window.open('https://www.example.com', 'newwindow', 'height=500,width=611,scrollbars=yes,status=yes'); ``` 这将打开一个新...

    验证码的实现 使用servlet实现

    - 使用`Graphics2D`对象在图像上绘制字符串。为了增加可读性和安全性,我们可以改变字体样式、颜色、倾斜角度,甚至在图像上添加一些随机的线条和噪点。 3. **保存验证码**: - 将生成的验证码字符串通过`...

    php图片转字符画

    接下来,我们定义一个名为 `asciifyImage` 的函数,该函数接收多个参数,并返回转换后的字符画字符串。 - **函数名称和参数定义** ```php function asciifyImage($img, $asciiscale, $asciicolor, $asciialpha, ...

    验证码生成

    `drawString()` 方法负责将生成的随机字符串绘制到图像上,每个字符的位置、颜色、字体大小和旋转角度都是随机的,这增加了识别难度。 `genImg()` 方法是核心的Servlet处理方法,它接收`HttpServletRequest`和`...

    JSP验证码简单生成方法.pdf

    首先,验证码的基本原理是生成一段随机字符串,并将其显示在一个带有干扰元素的图片上,用户在提交表单时需要输入看到的字符串以验证其为真人操作。这个过程分为几个步骤: 1. **设置响应头**: 在JSP中,我们需要...

    Jsp验证码生成

    3. **绘制验证码**:在图片上绘制随机字符串。可以将每个字符以不同的颜色、角度和位置绘制,增加机器识别的难度。`Graphics2D`提供了丰富的绘图方法,如`drawString()`,可以用来在指定位置绘制文本。 4. **添加...

    特别有用的php验证码类_.docx

    我们看到验证码类`ValidateCode`定义了一些私有属性,包括验证码图像的宽度`$width`、高度`$height`、验证码字符数量`$codeNum`、图像资源`$img_resouce`、干扰色的数量`$disturbColorNum`以及生成的验证码字符串`$...

Global site tag (gtag.js) - Google Analytics