jquery.truncate省略显示（类alt/title提示）

wwwfgx1

于 2012-07-17 14:27:25 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS/CSS 文章标签： jquery function class

本文链接：https://blog.youkuaiyun.com/wwwfgx1/article/details/7755203

JS/CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在网页上使用jQuery库中的truncate插件来实现文本的自动截断功能，当文本过长时，只展示部分内容并在鼠标悬停时显示完整文本。

1、引入Jquery：

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.truncate.min.js"></script>

2、JS中给一个样式加入truncate

<script type="text/javascript">
	$(document).ready(function(){
	    $('.truncate_style').truncate({
	    	width: 'auto',
	    	after: '…',
	    	center: false,
	    	addclass: 'highlight',
	    	addtitle: true
	    });
	});
</script>

3、在需要的地方引用样式

<div><span class="truncate_style" >如果这里的文字过长的话，会截取前面一部分显示，其余的...省略，鼠标悬停时，title会显示全部内容</span></div>