js实现文字超出部分用省略号代替实例代码
2016-09-01 11:34
906 查看
话不多说,我们直接看代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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方法,实现这个功能还是很简单的,但是很实用,以上就是这篇文章的全部内容了,希望这篇文章对大家能有一定的帮助。
您可能感兴趣的文章:
相关文章推荐
- js实现文字超出部分用省略号代替实例代码
- js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
- css3实现多行文字超出部分省略号代替
- js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
- Js 实现字数限制,超出部分显示为省略号
- JS实现用特殊符号替换字符串的中间部分区域的实例代码
- js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
- CSS实现文字超出部分显示省略号
- CSS3实现两行或三行文字,然后多出的部分省略号代替
- js超出文字以省略号代替
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- css控制文字行数,超出部分用省略号代替
- IE 实现文字超出指定长度后用省略号代替
- js实现文字从右滚动到左边代码循环滚动实例
- CSS3:text-overflow实现文字截取,超出部分显示省略号
- 前端文字超出部分省略号代替
- 通过css实现文本超出部分以省略号(......)代替
- 4行CSS实现表格内容超过一行的部分,用省略号代替
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- 设置文字显示字数,超出部分用省略号表示