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 学习小结(适合新手参考)
Jul 30 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
vue-router 手势滑动触发返回功能
Sep 30 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 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 json与xml序列化/反序列化
2013/10/28 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
JavaScript 特殊字符
2007/04/05 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现rest请求api示例
2014/04/22 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
Django 限制访问频率的思路详解
2019/12/24 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
毕业生护理专业个人求职信范文
2014/01/04 职场文书
政府门卫岗位职责
2014/04/29 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
教师节倡议书
2014/08/30 职场文书
建筑工地文明标语
2014/10/09 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
会计工作岗位职责
2015/02/03 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP