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 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
js读写json文件实例代码
Oct 21 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
js实现登录拖拽窗口
Feb 10 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自动注册登录验证机制实现代码
2011/12/20 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
javascript基本语法分析说明
2008/06/15 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
详解vue中的computed的this指向问题
2018/12/05 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python批量解压zip文件的方法
2019/08/20 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
六一儿童节活动策划方案
2014/01/27 职场文书
公证书样本
2014/04/10 职场文书
家长会演讲稿
2014/04/26 职场文书
大学生求职信例文
2014/06/29 职场文书
商场收银员岗位职责
2015/04/07 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
python 中的jieba分词库
2021/11/23 Python