js实现文字超出部分用省略号代替实例代码
关于超出一定字数用省略号显示的问题,这种要求在我们日常开发的时候经常见到,我们之前基本都是用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实现文字超出部分用省略号代替实例代码的更多相关文章
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...
- 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)
文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...
- HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器
1,公共样式,在公共的 CSS 文件中加入以下内容 /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...
- css 文字超出部分显示省略号(原)
单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 使用js控制文本超出部分显示省略号
js代码 // 字数限制30字,超出不显示 fontNumber (date) { const length = date.length if (length > 30) { var str = ...
随机推荐
- phantomjs 截取twitter的网页(动态生成的页面)
// This example shows how to render pages that perform AJAX calls// upon page load.//// Instead of w ...
- C++编程命名规则
原文地址:http://www.cnblogs.com/ggjucheng/archive/2011/12/15/2289291.html 如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套 ...
- svn数据库自动备份脚本
创建一个存放备份数据的路径 mkdir /data/svnbak -p 采用shell脚本的方式实现自动备份 #vim backup.sh #!/bin/bash log="/data/sv ...
- cactiez v11添加对mysql数据库、apache系统进行监控
cactiez默认已经安装了mysql监控的模板,需要我们对服务器端和被监控的mysql客户端进行配置才能生效. 被监控的Mysql客户端: 如cactiez的IP为192.168.0.8 #添加一个 ...
- 作业8_exer1128.txt
1.规范化理论是关系数据库进行逻辑设计的理论依据,根据这个理论,关系数据库中的关系必须满足:每 一个属性都是(B). A.长度不变的 B.不可分解的 C.互相关联的 D.互不相关的 2.已知关系模式R ...
- JavaScript的类型自动转换高级玩法JSFuck
0 前言 最开始是不小心在微信公众号(程序员大咖)看到一篇JS的高逼格代码,然后通过里面的链接跳转到了JSFuck的wiki,就像顺着迷宫找宝藏的感觉,感叹JS的自动类型转换的牛逼. 1 样例 (!( ...
- IntelliJ IDEA 12:
启动参数-server -Xms1024m -Xmx1024m -XX:NewSize=128m -XX:MaxNewSize=128m -XX:PermSize=128m -XX:MaxPermSi ...
- 前端工程化之webpack中配置babel-loader(四)
安装 安装:npm i -D babel-core babel-loader babel-plugin-transform-runtime 安装:npm i -D babel-preset-es201 ...
- DOM树示意图
- Angular2学习(一)
Angular2的新特性: angular2的核心: 模块.组件.元数据.模板.数据绑定.服务.指令.依赖注入.模块. 组件:层层嵌套,形成组件树.父子组件沟通有输入和输出接口 组件包含JavaScr ...