js实现文字超出部分用省略号代替实例代码


Posted in Javascript onSeptember 01, 2016

话不多说,我们直接看代码

<!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实现文字超出部分用省略号代替实例代码

总结

其实主要还是用到了js的substring方法,实现这个功能还是很简单的,但是很实用,以上就是这篇文章的全部内容了,希望这篇文章对大家能有一定的帮助。

Javascript 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
js+html实现点名系统功能
Nov 05 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 #Javascript
在web中js实现类似excel的表格控件
Sep 01 #Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 #Javascript
AngularJs 指令详解及示例代码
Sep 01 #Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 #Javascript
JS实现列表的响应式排版(推荐)
Sep 01 #Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 #Javascript
You might like
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python随机函数random()使用方法小结
2018/04/29 Python
python创建学生管理系统
2019/11/22 Python
Python对象的属性访问过程详解
2020/03/05 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
周年庆典邀请函范文
2014/01/24 职场文书
研修第一天随笔感言
2014/02/15 职场文书
林肯就职演讲稿
2014/05/19 职场文书
中药学专业求职信
2014/05/31 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
关于车尾的标语大全
2015/08/11 职场文书