在网站项目中为了保证页面的美观,对于一些标题特别长的标题都习惯截取前N个字符,然后加上“……”。
一般处理的时候直接由服务器程序来截取文字,这样生产的html中标题文字不全,会一定程度的影响网站的seo优化。
我们也也可考虑在网站的前端,用过js脚本来截取字符。这样在html中输出的嗨是全部标题,不影响网站的seo优化。又能起到美观的作用。
下面就是一个用jquery写的文字截取。希望对大家能有所帮助。
用jquery文字特效限制内容列表字符长度或文字个数
<script type="text/javascript">
$(document).ready(function() {
var arrLinks = $(".ranklist a");
arrLinks.each(function() {
var s = $(this).text(),
l = $(this).text().length,
n = 18; //设置字符长度为18个
if (l > n) {
//文本所有内容用a标签的title属性提示文本全部内容
$(this).attr("title", s);
s = $(this).text(s.substring(0, n) + "...");
}
});
});
</script>
核心部分
在线演示地址:http://demo.lrxin.com/jquery/text/jQuery%cf%de%d6%c6%ce%c4%d7%d6%b8%f6%ca%fd/
下载地址:http://pan.baidu.com/share/link?shareid=1454481964&uk=1010090726
封装成jquery插件。
/**
* $.txtCur();
* @charset utf-8
* @extends jquery.1.8.3
* @example
* $('.info').txtCur({n:50});
* $('.info').txtCur({n:50,z:'...',isTitle:1});
*/
(function($){
$.fn.extend({
txtCur: function(options) {
//默认参数
var defaults = {
/**截取长度 */
n:60,
/*结尾添加字符*/
z:'...' ,
/*是否在标签上 添加 title 属性*/
isTitle : true
}
var options = $.extend(defaults, options);
return this.each(function(){
var o = options;
var $this = $(this);
var s = $this.text(),
l = $this.text().length,
n = o.n; //设置字符长度为18个
if (l > n) {
//文本所有内容用a标签的title属性提示文本全部内容
if(o.isTitle) {$(this).attr("title", s);}
s = $this.text(s.substring(0, n) + o.z);
}
/**/
});
}
});
})(jQuery);