jquery文字特效限制内容列表字符长度或文字个数
在网站项目中为了保证页面的美观,对于一些标题特别长的标题都习惯截取前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);