js实现文字截断
先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦。这里写了一个js的文字截断功能。直接上代码。
HTML(测试用的):
- <div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
- <div limit="10" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
- <div limit="5" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
- <div limit="2" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
- <div >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
- <div limit="20" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
- <div limit="100" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
- <div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
JS:
- var limit=[];
- var Text=[];
- var Pox=document.getElementsByTagName('*');
- for(var i=0;i<Pox.length;i++){
- if(Pox[i].getAttribute("limit")){
- limit[i]=Pox[i].getAttribute("limit");
- Text[i]=Pox[i].innerHTML;
- if(limit[i]<Text[i].length){
- Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
- }
- }
- }
这里用getElementsByTagName获取所有节点遍历,if(Pox[i].getAttribute("limit"))筛选含有limit这个自定义属性的节点,然后获取各个节点自定义属性limit的值,将其放入limit数组中,把各个节点文字放入Text数组中,将需要截断的值和文本长度作比较,进行截断。
全部JS,这里写的自调:
- <script type="text/javascript">
- window.onload=function(){
- (function limit(){
- var limit=[];
- var Text=[];
- var Pox=document.getElementsByTagName('*');
- for(var i=0;i<Pox.length;i++){
- if(Pox[i].getAttribute("limit")){
- limit[i]=Pox[i].getAttribute("limit");
- Text[i]=Pox[i].innerHTML;
- if(limit[i]<Text[i].length){
- Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
- }
- }
- }
- }());
- }
- </script>
效果图:
js实现文字截断的更多相关文章
- CSS多行文字截断
有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 单行文字 单行文字截断比较明显: .truncate { width: ...
- js对文字进行编码
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...
- js实现文字逐个显示
先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...
- 使用JS实现文字搬运工
使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- JS实现文字转语音播放
JS实现文字转语音播放背景实现方式第一种:百度文字转语音开放API第二种:微软TTS语音引擎第三种:SpeechSynthesisUtterance总结背景在做项目的过程中,经常会遇到场景是客户要求播 ...
- js实现文字上下滚动效果
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
- js 实现文字滚动功能,可更改配置参数 带完整版解析代码。
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...
- JS实现文字截取(雾)
今天在跳板群那里看到一个神奇的样式,效果: 感觉十分神奇,因为一开始以为他是只有一个P元素包着文字然后最后一个自动截取文字,而且最后一行还可以提前截取???这怎么做到的,然后想了一下css怎么做,好像 ...
随机推荐
- hdu 4712 Hamming Distance(随机数法)
d.汉明距离是使用在数据传输差错控制编码里面的,汉明距离是一个概念,它表示两个(相同长度)字对应位不同的数量, 我们以d(x,y)表示两个字x,y之间的汉明距离.对两个字符串进行异或运算,并统计结果为 ...
- Regex.Replace的基本用法
Regex构造函数Regex(string pattern)Regex(string pattern,RegexOptions options)参数说明pattern:要匹配的正则表达式模式optio ...
- [SQL]获取所有数据库名、获取数据库中表名、获取表中的字段名
--()获取所有数据库名: Select Name FROM Master..SysDatabases order by Name --()获取所有表名 --XType=''U'':表示所有用户表; ...
- android 资源文件
系统文档:http://developer.android.com/guide/topics/resources/available-resources.html 1. 系统下资源文件夹的名字是固定的 ...
- Configure apt-get / git/ curl to use a proxy (Ubuntu)
http://technoblog.org/2009/07/configure-apt-get-to-use-a-proxy-ubuntu/ Open the following configurat ...
- getdata
public partial class GetData : System.Web.UI.Page { protected void Page_Load(object sender, EventArg ...
- POJ 3207 Ikki's Story IV - Panda's Trick
Ikki's Story IV - Panda's Trick Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 7296 ...
- lua绑定c++的时候常见得错误
1 Error parsing reanslation unit 这种情况,首先来说你的python 2.7以及他的插件安装是完整的,最可能的原因就是自己写的ini文件,header路径错误,可以把这 ...
- Android下实现控件的叠加显示
<FrameLayout android:layout_width="fill_parent" android:layout_height="match_paren ...
- 使用postman玩转接口测试
(一)前言: 之前搞自动化接口测试,由于接口的特性,要验证接口返回xml中的数据,所以没找到合适的轮子,就自己用requests造了个轮子,用着也还行,不过就是case管理有些麻烦,近几天又回头看了看 ...