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 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
iView框架问题整理小结
2018/10/16 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python迭代器实例简析
2014/09/25 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
民事授权委托书范文
2014/08/02 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
转让协议书
2015/01/27 职场文书
自主招生专家推荐信
2015/03/26 职场文书
整改通知书
2015/04/20 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书