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 相关文章推荐
js Date概念详细介绍
Nov 22 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
taro开发微信小程序的实践
May 21 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
微信小程序中为什么使用var that=this
Aug 27 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
大师制作的中短波矿石收音机
2020/04/02 无线电
用Flash图形化数据(二)
2006/10/09 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
python实现计算倒数的方法
2015/07/11 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python微信撤回监测代码
2019/04/29 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
Python 可视化神器Plotly详解
2020/12/26 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
业绩考核岗位职责
2014/02/01 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
医学求职信
2014/05/28 职场文书
应届毕业生自荐书
2014/06/18 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
结婚典礼主持词
2015/06/29 职场文书
教师听课学习心得体会
2016/01/15 职场文书