博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js实现文字超出部分用省略号代替实例代码
阅读量:4548 次
发布时间:2019-06-08

本文共 1275 字,大约阅读时间需要 4 分钟。

关于超出一定字数用省略号显示的问题,这种要求在我们日常开发的时候经常见到,我们之前基本都是用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" "">
<
html
xmlns
=
""
>
<
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方法,实现这个功能还是很简单的,但是很实用,以上就是这篇文章的全部内容了,希望这篇文章对大家能有一定的帮助。

转载于:https://www.cnblogs.com/heroine/p/6702818.html

你可能感兴趣的文章
矩阵乘法
查看>>
WEB ICON 的探讨
查看>>
关于.Net中的反射使用入门
查看>>
[内核编程] 键盘过滤第一个例子ctrl2cap(4.1~4.4)汇总,测试
查看>>
<转>Spring Test 整合 JUnit 4 使用总结
查看>>
Java读书笔记05 类与对象
查看>>
正则表达式语法 2
查看>>
c# winform 应用程序根据条件阻止窗口关闭
查看>>
转载:简单的php写入数据库类
查看>>
垂直居中的几种实现方法
查看>>
UILabel标签文字过长时的显示方式
查看>>
H5离线缓存机制-manifest
查看>>
[学习笔记]BSGS
查看>>
NHibernate 01 [简述]
查看>>
EL表达式浅析以及使用场景
查看>>
Android数据库高手秘籍(一)——SQLite命令
查看>>
[Oracle] 分析功能(1)- 语法
查看>>
Android ViewPager使用具体解释
查看>>
UNIX下改动时间简单一例
查看>>
秒杀多线程第四篇 一个经典的多线程同步问题
查看>>