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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
javascript 全角转换实现代码
Jul 17 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
Node.js简单入门前传
Aug 21 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
纯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
Cannot modify header information错误解决方法
2008/10/08 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python进程间通信之共享内存详解
2017/10/30 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
有个性的自我评价范文
2013/11/15 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
红色旅游心得体会
2014/09/03 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python