在做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; }
详细参见:
相关推荐
标题中提到的“css截取字符串”实际上是关于在Web前端开发中如何利用CSS的特性来实现文本截断的效果。在这里,CSS并非传统意义上的编程语言,它不具备直接截取字符串的功能,但它可以通过一些属性来控制文本的显示,...
通过设置CSS属性,例如宽度(width)、文本对齐(text-align)、溢出隐藏(overflow)、省略号显示(text-overflow)以及空白处理(white-space),可以使得超出设定宽度的字符串部分用省略号代替,而不影响页面布局...
例如,Web浏览器窗口的宽度、高度等参数设计后,可对浏览器像素的高度、宽度等进行设置,在数据分析与处理的基础上,可对参数属性进行设计与优化。根据浏览器的位置,将浏览器定位在计算机屏幕中央,通过浏览器的...
4. **网页上可见**(IsVisible): 这个属性决定了Web部件在浏览页面时是否可见。如果不想让Web部件显示在页面上,但仍然需要其提供数据给其他部件,可以通过隐藏它来实现。 5. **方向**(Dir): 根据文本的语言方向设置...
为了保持表格布局的一致性,同时避免过长的字符串破坏布局,我们通常会使用CSS样式来控制这些超长字符串的显示方式,使其在超出单元格宽度时能够以省略号(...)的形式显示。 在CSS中实现文本溢出用省略号表示的...
当输入的字符串长度增加时,为了保持图片尺寸不变,需要自动减小字体大小,使所有文字都能完整显示在图片内。 ##### 3. 水平垂直居中 为了提高图片的整体美观度,文字应处于图片的中心位置,无论文字长度如何变化,...
HTML5 Canvas是现代Web开发中的一个关键特性,它允许开发者在网页上绘制图形,实现动态交互效果。在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中,作者深入探讨了如何利用Canvas技术来实现菜单项的...
根据题目描述,'01B90166441358'这个十六进制字符串代表了一个358x441像素的JPEG图片。 解析步骤如下: 1. **提取高度**:从字符串中提取前两个字符'01B9',并将其转换为十进制表示图片的高度。这里的'01B9'等于十...
- VBScript支持多种运算符,包括算术运算符、比较运算符和字符串连接运算符。 - 字符串连接可以使用`&`运算符。 - 负数运算符`-`具有较高的优先级,通常高于乘法和除法运算符。 通过上述总结,我们可以清晰地...
1. **尺寸压缩**:通过调整图片的宽度和高度,使其适应网页需求,同时保持宽高比,降低像素数量。 2. **质量压缩**:利用JavaScript库(如`img-compressor.js`或`compressorjs`)对图片进行有损或无损压缩,降低图片...
定义字符串变量`$strChars`存储字符画内容,设置默认字体`$strFont`,并使用`str_split()`函数将字符集分割到数组中。同时,初始化其他与参数相关的变量,如缩放比例`$iScale`、颜色开关`$bColor`、透明度`$bAlpha`...
在大图片压缩的场景中,我们主要利用`toDataURL()`方法,它可以将Canvas的内容转换成Data URL,即一个包含图片数据的base64编码字符串。通过调整Canvas的大小,我们可以控制图片的压缩比例,从而实现图片的压缩。 ...
* specs:一个字符串,用于设置新打开的浏览器窗口的属性。 例如: ```javascript window.open('https://www.example.com', 'newwindow', 'height=500,width=611,scrollbars=yes,status=yes'); ``` 这将打开一个新...
- 使用`Graphics2D`对象在图像上绘制字符串。为了增加可读性和安全性,我们可以改变字体样式、颜色、倾斜角度,甚至在图像上添加一些随机的线条和噪点。 3. **保存验证码**: - 将生成的验证码字符串通过`...
接下来,我们定义一个名为 `asciifyImage` 的函数,该函数接收多个参数,并返回转换后的字符画字符串。 - **函数名称和参数定义** ```php function asciifyImage($img, $asciiscale, $asciicolor, $asciialpha, ...
`drawString()` 方法负责将生成的随机字符串绘制到图像上,每个字符的位置、颜色、字体大小和旋转角度都是随机的,这增加了识别难度。 `genImg()` 方法是核心的Servlet处理方法,它接收`HttpServletRequest`和`...
首先,验证码的基本原理是生成一段随机字符串,并将其显示在一个带有干扰元素的图片上,用户在提交表单时需要输入看到的字符串以验证其为真人操作。这个过程分为几个步骤: 1. **设置响应头**: 在JSP中,我们需要...
3. **绘制验证码**:在图片上绘制随机字符串。可以将每个字符以不同的颜色、角度和位置绘制,增加机器识别的难度。`Graphics2D`提供了丰富的绘图方法,如`drawString()`,可以用来在指定位置绘制文本。 4. **添加...
我们看到验证码类`ValidateCode`定义了一些私有属性,包括验证码图像的宽度`$width`、高度`$height`、验证码字符数量`$codeNum`、图像资源`$img_resouce`、干扰色的数量`$disturbColorNum`以及生成的验证码字符串`$...