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 相关文章推荐
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
SSI指令
2006/11/25 PHP
php生成excel文件的简单方法
2014/02/08 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
在Python中实现字典反转案例
2020/12/05 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
领导证婚人证婚词
2014/01/13 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python