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

前端技术 2023/09/08 JavaScript
长度超出规定长度，显示省略号

设置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>

本文地址：https://www.stayed.cn/item/21041

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案