1. 使用JavaScript进行标题字符截断
在网页设计之中，由于版面的有限，标题或段落字符的合理截断是我们经常碰到的问题。为了解决这个问题，通常我们使用服务器端编程语言来处理；但有些时候，在服务器不支持任何动态编程语言的情况下，我们也可以使用JavaScript在客户端实现这一截断功能：使用JavaScript库Prototype.js来实现（标题）的字符截断，超过指定宽度的区域将用"....."代替。
原理：这里主要用到了国外作者Steffen Rusitschka编写的ellipsis.js字符截断插件。截断功能的实现主要依靠JavaScript来根据文字外围DIV宽度来动态替换掉超过长度的字符串。也就是说，我们需要给截断字符的周围定义一个带有宽度（Width）属性的DIV层，这点务必注意。剩下的工作交由ProtoType和ellipis.js来完成即可。
使用方法
1、编写一个简单的HTML页面，并先后在<head>标签内链入两个JS文件——Prototype.js和ellipsis.js：
|
1. <script type="text/javascript" src="prototype.js"></script> 2. <script type="text/javascript" src="ellipsis.js"></script> |
2、然后在页面的<body>区域编写如下HTML语句：
|
<div style="width:200px;margin:20px auto;"><h4 class="ellipsis">中文字符标题截断测试效果查看?</h4></div> |
请务必注意上述红色加亮代码：在需要截断的字符外围定义一个有宽度属性的<div>。然后在这个<div>里层的元素上附加一个Class="ellipsis"。这样一来JS文件就会根据CSS中定义的宽度（这里是200px）来截断<h4>中包含的汉字了。
当然了，不用<h4>标签，你也可以使用其他标签来包含内部的汉字，比如<span>：
|
<div style="width:200px;margin:20px auto;"><span class="ellipsis">中文字符标题截断测试效果查看?</span></div> |
是不是很简单？没错，这就是ProtoType的魅力。
3、最后的HTML代码：
|
<!DOCTYPE html PUBLIC "-//W |
你可能会感兴趣的资源：
下载源码：js-cut-string.zip
2.无hack无js全兼容text-overflow-ellipsis效果
http://www.fendou163.cn/article/20090311/27072.html
浙公网安备 33010602011771号