关于超出一定字数用省略号显示的问题，这种要求在我们日常开发的时候经常见到，我们之前基本都是用CSS来完成的，今天给大家分享个Javascript实现这个功能的示例代码，有需要的可以参考借鉴。

话不多说，我们直接看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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的substring方法，实现这个功能还是很简单的，但是很实用，以上就是这篇文章的全部内容了，希望这篇文章对大家能有一定的帮助。

js实现文字超出部分用省略号代替实例代码的更多相关文章

  1. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  2. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  3. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  4. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  5. HTML5 元素文字超出部分显示省略号（支持多行），兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  6. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  7. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  8. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. 使用js控制文本超出部分显示省略号

    js代码 // 字数限制30字,超出不显示 fontNumber (date) { const length = date.length if (length > 30) { var str = ...

随机推荐

  1. centos7版本设置OS启动默认进入图形界面还是文本界面

    相比7之前的版本,在centos7版本中,设置OS启动默认进入图形界面还是文本界面有了点变化 检查当前默认设置 [root@rems2 ~]# systemctl get-default graphi ...

  2. Paramiko 操作远端时无法切换目录的问题

    最近在用Paramiko 开发一款远程测试调试框架,结果发现目录怎么都无法切换,查了下原因,在http://bbs.chinaunix.net/thread-1675446-1-1.html看到了 P ...

  3. dns轮询

    负载均衡最开始一步,利用它实现负载均衡集群的定位

  4. unbuntu中如何像Windows一样顺畅的切换中英文输入法

    1.首先在unbuntu安装搜狗拼音输入法(这个不用教了) 2.点击右上角的搜狗拼音的图标点击设置进入设置页面 3.选择高级 4.选择Fcitx设置 5.添加输入法英语(美国) 6.在设置中选择按键, ...

  5. saltstack自动化运维系列①之saltstack服务安装及简单使用

    Saltstack介绍 Salt三种运行方式 1.local本地运行2.Master/Minion3.Salt ssh Salt的三大功能 a.远程执行b.配置管理(状态管理)c.云管理:阿里云,aw ...

  6. centos7.2环境nginx+mysql+php-fpm+svn配置walle自动化部署系统详解

    centos7.2环境nginx+mysql+php-fpm+svn配置walle自动化部署系统详解 操作系统:centos 7.2 x86_64 安装walle系统服务端 1.以下安装,均在宿主机( ...

  7. 转载：2.2.1 块配置项《深入理解Nginx》（陶辉）

    原文:https://book.2cto.com/201304/19626.html 块配置项由一个块配置项名和一对大括号组成.具体示例如下:events {-} http { upstream ba ...

  8. 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题

    1.前言 最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文 ...

  9. SKlearn库学习曲线

    思想: # 1.现将所有样本用交叉验证方法或者(随机抽样方法) 得到 K对 训练集-验证集# 2.依次对K个训练集,拿出数量不断增加的子集如m个,并在这些K*m个子集上训练模型.# 3.依次在对应训练 ...

  10. Linux权限命令

    Linux 基础——权限管理命令chmod   一.Linux中的文件权限与目录权限 Linux中定义了3种访问权限,分别是r.w.x.其中r表示对象是可读的,w表示对象是可写的,x表示对象是可执行的 ...