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操作select控件的几种方法
Jun 02 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python如何实现视频转代码视频
2019/06/17 Python
python提取log文件内容并画出图表
2019/07/08 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
天游软件面试
2013/11/23 面试题
杠杆的科学教学反思
2014/01/10 职场文书
单位办理社保介绍信
2014/01/10 职场文书
大学生军训广播稿
2014/01/24 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
大学生自我鉴定书
2014/03/24 职场文书
白莲教口号
2014/06/18 职场文书
建筑安全生产责任书
2014/07/22 职场文书
前台岗位职责范本
2015/04/16 职场文书
周一问候语大全
2015/11/10 职场文书
python的html标准库
2022/04/29 Python