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中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 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
全新Mac配置PHP开发环境教程
2016/02/03 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Python同时迭代多个序列的方法
2020/07/28 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
毕业生怎样写好自荐信
2013/11/11 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
临床医学专业求职信
2014/08/08 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
Python集合的基础操作
2021/11/01 Python