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 写的个性导航菜单
Dec 24 Javascript
获取body标签的两种方法
Oct 13 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
JavaScript运算符小结
Jun 03 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python与mysql数据库交互的实现
2020/01/06 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
党日活动总结
2014/05/07 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
质检员岗位职责范本
2015/04/07 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python