管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JQuery 控制内容长度超出规定长度显示省略号

　　长度超出规定长度，显示省略号

　　设置class为displayPart，

　　设置自定义属，displayLength可显示长度（不包含...），双字节字符，长度 *2，

　　

复制代码 代码如下:

　　<script type="text/javascript">

　　$.fn.extend({

　　displayPart:function () {

　　var displayLength = 100;

　　displayLength = this.attr("displayLength") || displayLength;

　　var text = this.text();

　　if (!text) return "";

　　var result = "";

　　var count = 0;

　　for (var i = 0; i < displayLength; i++) {

　　var _char = text.charAt(i);

　　if (count >= displayLength) break;

　　if (/[^x00-xff]/.test(_char)) count++; //双字节字符，//[u4e00-u9fa5]中文

　　result += _char;

　　count++;

　　}

　　if (result.length < text.length) {

　　result += "...";

　　}

　　this.text(result);

　　}

　　});

　　$(function () {

　　$(".displayPart").displayPart();

　　});

　　</script>

　　

复制代码 代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　<html>

　　<head>

　　<title> New Document </title>

　　<meta name="Generator" content="EditPlus">

　　<meta name="Author" content="">

　　<meta name="Keywords" content="">

　　<meta name="Description" content="">

　　<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

　　</head>

　　<body>

　　<h2>hello world</h2>

　　<div style="width:500px;">

　　hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world!!!

　　</div>

　　<hr>

　　<h2>hello</h2>

　　<div class="displayPart" displayLength="40"> hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhelloworldhello worldhello worldhello worldhello worldhello worldhello world

　　</div>

　　</body>

　　</html>

教程首页 更多教程