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 tools之tabs 选项卡/页签
Jul 25 Javascript
JS常用正则表达式总结
Nov 12 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 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
phpfans留言版用到的install.php
2007/01/04 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php中执行系统命令的方法
2015/03/21 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
python分割和拼接字符串
2013/11/01 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python 实现按对象传值
2019/12/26 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
采购类个人求职的自我评价
2014/02/18 职场文书
企业出纳岗位职责
2014/03/12 职场文书
政府信息公开实施方案
2014/05/09 职场文书
英语求职信范文
2014/05/23 职场文书
百家讲坛观后感
2015/06/12 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android