雨中人

是为了对上一篇“区别中英文截取字符”做个补充纠正，其中有一点，我是概念上混淆了，一个UTF-8中文字确实是占了3个字节，但是字符宽度还是2个字符宽度，所以造成了UTF-8下，截取相同数量的字符，但是宽度却不相同,更正后的代码还是有一定的局限性，就是要用等宽字体“如宋体,sans-serif”，但是如果你定义成了非等宽字体就不适用了如“Arial”,举个最简单的例子“a”,”w”这两个字母定义成“Arial”的时候，它们的宽度是不相等的。希望大家能提供更好的思路来解决这个问题，fixtext插件代码如下：

(function(){
$.fn.fixtext=function(options){
var defaults={
ellipsis:true,
maxLen:"15"
}
var options = $.extend(defaults, options);
this.each(function(){
var fixobj=$(this);
var currentStr="";
var text=$(fixobj).html();
var textlen=text.length;
//判断是否保留省略号
options.maxLen=(options.ellipsis)?options.maxLen-4:options.maxLen;
for(var i=0,len=textlen;i<len; i++){
currentStr+=text.charAt(i);
if(getCharLength(currentStr)>options.maxLen){
//不保留里省略号的文字内容
text2=text.substr(0,i);
//保留里省略号的文字内容
if(options.ellipsis){text2=text2+"……"}
$(fixobj).html(text2);
return;
}
else{
$(fixobj).html(currentStr);
}
}
//计算截取字符的长度
function getCharLength(str){
var charLen=0;
for (var i=0,len=str.length; i<len; i++){
if(str.charCodeAt(i)>255){
charLen+=2;
}
else{
charLen+=1
}
}
return charLen;
}
})
}
})(jQuery)

Demo : http://www.rainboys.cn/demo/fixtext.html

插件下载地址：http://www.rainboys.cn/demo/js/fixtext.js

最近很忙，博客很久没有更新了，今天抽出了一点闲暇时间，动手写了这个“区别中英文截取固定字符”的jQuery插件，暂且命名为fixtext吧，相信前端的兄弟们，这种情况会经常遇到，但是一直找不到太完美的解决办法，通常下用css截取，但是css有弊端，最令人不满意的是，限定宽度后有可能会截掉不完整的字符，相当的不雅，后台截取当然最好，但是多数情况下PD不一定愿意干这个活。今天特意写了这个插件，基本能满足大家的工作需要了，包括中英文混排的文字，并且可以区分UTF-8,和GB2312，这样大家应该清楚，中文的编码不一样占的字符也是不一样的，UTF-8占了三个字符，而GB2312占了两个字符，另外还包括一个非常实用的功能——是否保留省略号，用起来还算方便吧。
fixtext插件源码：

/*
* fixtext 0.1
* Copyright (c) 2010 Rainboy http://www.rainboys.cn/
* Date: 2010-07-26
* 区别中英文截取字符
*/
(function(){
$.fn.fixtext=function(options){
var defaults={
ellipsis:true,
maxLen:"15"
}
var options = $.extend(defaults, options);
this.each(function(){
var fixobj=$(this);
//判断网页的编码方式,如果是UTF-8那么一个汉字就占3个字符，如果GB2312一个汉字占2个字符
var webcode;
webcode=(document.characterSet)?document.characterSet:document.charset;
incre=(webcode.toUpperCase()=="GB2312")?2:3;
var currentStr="";
var text=$(fixobj).html();
var textlen=text.length;
//判断是否保留省略号
options.maxLen=(options.ellipsis)?options.maxLen-2*incre:options.maxLen;
for(var i=0,len=textlen;i<len; i++){
currentStr+=text.charAt(i);
if(getCharLength(currentStr,incre)>options.maxLen){
//不保留里省略号的文字内容
text2=text.substr(0,i);
//保留里省略号的文字内容
if(options.ellipsis){text2=text2+"……"}
$(fixobj).html(text2);
return;
}
else{
$(fixobj).html(currentStr);
}
}
//计算截取字符的长度
function getCharLength(str,incre){
var charLen=0;
for (var i=0,len=str.length; i<len; i++){
if(str.charCodeAt(i)>255){
charLen+=incre;
}
else{
charLen+=1
}
}
return charLen;
}
})
}
})(jQuery)

引用脚本

$(要截取的对象).fixtext({ellipsis:false,maxLen:"20"});

这里面包括了两个参数ellipsis和maxLen,顾名思义，ellipsis它就是决定是否保留省略号的，当他的参数是“true”的时候，就保留省略号，“false”时就不保留省略号，maxLen就是截取的字符长度，有一点提醒一下大家，maxLen包括省略号的长度，比如要截取20个字符，并且保留省略号，如果页面编码是GB2312,那么截取的字符就是16个。插件的源代码就不解释了，注释已经很详细了。童鞋们使用过程中遇到了问题的话，请给我留言！欢迎大家来交流！

Demo : http://www.rainboys.cn/demo/fixtext.html

插件下载地址：http://www.rainboys.cn/demo/js/fixtext.js

IE6在背景图片缓存上有一个bug：它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片，在IE6下会出现每次鼠标滑过则重新向服务器请求图片，如果服务器反应较慢，那么hover效果就会出现短暂的空白，令人极度不爽。虽然可以通过CSS sprites的方式解决问题的，但效果差强人意。 示例： a{ background:url(normal.gif); } a:hover { background:url(hover.gif); } 如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片. 解决方法 具体的解决方法就是在页面中加入一段简单的javascript脚本，告诉IE6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand(“BackgroundImageCache”,false,true); 关于这段脚本的放置方式有两种：

1.使用CSS，在CSS中加入如下代码 html {}{ filter: expression(document.execCommand(“BackgroundImageCache”, false, true)); }

2.使用JS： document.execCommand(“BackgroundImageCache”,false,true);