關於超出一定字數用省略號顯示的問題，這種要求在我們日常開發的時候經常見到，我們之前基本都是用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方法，實現這個功能還是很簡單的，但是很實用，以上就是這篇文章的全部內容了，希望這篇文章對大家能有一定的幫助。