关于超出一定字数用省略号显示的问题,这种要求在我们日常开发的时候经常见到,我们之前基本都是用CSS来完成的,今天给大家分享个Javascript实现这个功能的示例代码,有需要的可以参考借鉴。
话不多说,我们直接看代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >超过的文字用省略号代替的js写法</ title >
</ head >
< body >
< script >
function cutString(str, len) {
//length属性读出来的汉字长度为1
if(str.length*2 <= len) {
return str;
}
var strlen = 0;
var s = "";
for(var i = 0;i < str.length ; i++) {
s = s + str.charAt(i);
if (str.charCodeAt(i) > 128) {
strlen = strlen + 2;
if(strlen >= len){
return s.substring(0,s.length-1) + "...";
}
} else {
strlen = strlen + 1;
if(strlen >= len){
return s.substring(0,s.length-2) + "...";
}
}
}
return s;
} window.onload=function(){ var str = document.getElementById('cut_str').innerHTML;
var s=cutString(str,15);
document.getElementById('cut_str').innerHTML=s;
} </ script >
< div class = "js_cut_str" >< p id = "cut_str" >超过的文字用省略号代替的js写法。</ p ></ div >
</ body >
</ html >
|
实现效果图
总结
其实主要还是用到了js的substring
方法,实现这个功能还是很简单的,但是很实用,以上就是这篇文章的全部内容了,希望这篇文章对大家能有一定的帮助。