利用jquery实现链接文字截断显示,超级方便

前台开发中为了配合页面布局，经常需要将过长的链接文字截断，如“利用jquery实现链接文字截断显示”可能要被截断成“利用jquery实现链接...”，然后鼠标停留在链接上再显示其全部内容。此功能可在服务器端处理，但如果页面布局经常变动，则需要修改服务器代码配合，无法做到较好的页面和后台服务的分离。于是利用JQuery我找到了一个方便的办法。

实现效果如下，如果你想截断一个链接（或者别的东西也可以），请在文字的外围标签上加一个class，为"TextCutXX"，比如刚才的链接:

<a href=’#’>
利用jquery实现链接文字截断显示
</a>

可以写成：

<a href=’#’class='TextCut12'>
利用jquery实现链接文字截断显示
</a>

即可将该链接截断为前12个字符：“利用jquery实现链接...”。

下面废话少说，说下方法，在你的页面中加入如下js代码：

$(function() {
$("[class^='TEXTCUT']").each(function() {
var cutlength = parseInt($(this).attr('class').replace("TEXTCUT", ""));
var text = $(this).html().trim();
$(this).attr("title", text);
text = (text.length > cutlength + 2) ? (text.substring(0, cutlength) + "...") : text;
$(this).html(text);
});

});

OK了，以后想修改链接的截断长度直接修改css类名就行了，是不是很方便，美工不用修改任何服务器代码哦！

实现原理很简单，利用JQuey的选择器， $("[class^='TEXTCUT']")是选择了所有class以"TextCut"开头元素，然后下面的代码不用解释了吧，取得要截断的长度，把链接文字取出，然后设置到title属性上，然后截断，OK~