JS实现文字截取(雾)
今天在跳板群那里看到一个神奇的样式,效果:
感觉十分神奇,因为一开始以为他是只有一个P元素包着文字然后最后一个自动截取文字,而且最后一行还可以提前截取???这怎么做到的,然后想了一下css怎么做,好像怎么都不可以在最后一行提前截取
css多行截取方法是:
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
然而这个方法只能实现多行截取,不能让最后一行提前截取;如果只是靠css来截取的话 貌似是不可以的,理由如图:
溢出的部分直接把空间撑开,不会提前截取。
所以只能用js来截取了。JS要怎么截取?一开始我是不知道的,直到看到了其他前辈的博客:
http://www.cnblogs.com/milkmap/archive/2013/05/27/3101325.html;
根据这个博客自己写了截取的js
var element = $("div");var element2 = $("div p");var h = element.height()-20;var v = '';var val = element2.html();console.log(val)while(h< element2.height()){v = element2.html();v = v.substring(0,v.length - 1);element2.html(v);}var val2 = val.replace(v,"");element.append("<p style='width: 120px;overflow: hidden;text-overflow: ellipsis;word-break: keep-all;display: inline-block;'>"+val2+"</p>");element.append("<span>详细</span>")
核心部分就是循环那段了,通过判断容器大小,来截取字符串,看完博客后才知道可以这样截,果然要好好看javascript的原生API了。
最后附上css,html
html,body{line-height:20px;}p{padding:0px;margin:0px;}.row{width: 200px;border: 1px solid #000;line-height: 20px;max-height: 60px;clear: both;overflow: hidden;}span{display: inline-block;float: right;color: white;background: black;}
<div class="row"><p>在1815年,正值拿破仑被流放厄尔巴岛时,一个既年轻又成功的商船水手爱德蒙·唐泰斯,在船长利克莱尔濒死的时刻接受了船长指挥权,并回到了家乡马赛迎娶他的未婚妻美蒂丝。利克莱尔,一个拿破仑的支持者,吩咐唐泰斯运送两样物品,一个是给予位于厄尔巴岛上的马歇尔·伯特兰德的包裹,一个是从厄尔巴岛上寄出给予一位居住于巴黎的神秘男子的信件。这封神秘信件使唐泰斯两位妒忌他的朋友,在另一位朋友的建议下指控唐泰斯叛国。马赛的首席检察官韦尔福,虽然平时为人正直,开始时也同情唐泰斯,但看到信件的神秘收信人是他父亲后,未经调查便判决唐泰斯终身监禁于海上的孤岛监狱伊夫堡,并且于同时烟灭了作为证据的信件。在他被囚在伊夫堡的十四年中,他与亚伯·法利亚成为了朋友,一名声称拥有大量财宝并试图挖地道逃狱的老囚犯。法利亚将一生所学教授于唐泰斯,并在死前将藏于基督山的财宝告知于唐泰斯。1829年,法利亚死去后,唐泰斯便装扮法利亚的尸体逃离了伊夫堡,并被一艘走私船给救起,在跟走私犯一起工作数个月后,他来到了基督山,他佯装成受伤的模样,并说服走私犯暂时将他置于基督山,趁著这段时间前往财宝的藏置处。在找到了财宝之后,唐泰斯回到了故乡马赛,得知了自己的父亲贫穷潦倒而死;他建造了一艘船,将剩余的财宝藏在船上,接着向塔斯卡尼政府收购基督山及伯爵的头衔。回到了马赛,唐泰斯便开始计划他的复仇,但在那之前,他帮助了一些在他入狱前帮助过他的人。在1815年,正值拿破仑被流放厄尔巴岛时,一个既年轻又成功的商船水手爱德蒙·唐泰斯,在船长利克莱尔濒死的时刻接受了船长指挥权,并回到了家乡马赛迎娶他的未婚妻美蒂丝。利克莱尔,一个拿破仑的支持者,吩咐唐泰斯运送两样物品,一个是给予位于厄尔巴岛上的马歇尔·伯特兰德的包裹,一个是从厄尔巴岛上寄出给予一位居住于巴黎的神秘男子的信件。这封神秘信件使唐泰斯两位妒忌他的朋友,在另一位朋友的建议下指控唐泰斯叛国。马赛的首席检察官韦尔福,虽然平时为人正直,开始时也同情唐泰斯,但看到信件的神秘收信人是他父亲后,未经调查便判决唐泰斯终身监禁于海上的孤岛监狱伊夫堡,并且于同时烟灭了作为证据的信件。在他被囚在伊夫堡的十四年中,他与亚伯·法利亚成为了朋友,一名声称拥有大量财宝并试图挖地道逃狱的老囚犯。法利亚将一生所学教授于唐泰斯,并在死前将藏于基督山的财宝告知于唐泰斯。1829年,法利亚死去后,唐泰斯便装扮法利亚的尸体逃离了伊夫堡,并被一艘走私船给救起,在跟走私犯一起工作数个月后,他来到了基督山,他佯装成受伤的模样,并说服走私犯暂时将他置于基督山,趁著这段时间前往财宝的藏置处。在找到了财宝之后,唐泰斯回到了故乡马赛,得知了自己的父亲贫穷潦倒而死;他建造了一艘船,将剩余的财宝藏在船上,接着向塔斯卡尼政府收购基督山及伯爵的头衔。回到了马赛,唐泰斯便开始计划他的复仇,但在那之前,他帮助了一些在他入狱前帮助过他的人。</p></div>
这个方法,感觉其实也不太好,因为如果要到实际应用的话一个商城这么多个标题或者备注,如果都要这样处理的话。。。感觉while循环次数是不是有点多了。。。。
转载于:https://www.cnblogs.com/gjqiang/p/5800093.html
JS实现文字截取(雾)相关推荐
- php 让字体闪烁,js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...
- 文字转语音+html5,JS实现文字转语音并播放
html: div> audio> div> js: function doTTS() { var ttsDiv = document.getElementById('bdtts_d ...
- 使用JS实现文字搬运工
使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...
- php实现文字向左跑马灯,js实现文字跑马灯效果
js实现文字超过显示宽度每间隔1s自动向左滚动显示 *{ margin:0; padding:0;} body{font:12px/1 '微软雅黑';} .wrapper{font-size: 0.8 ...
- JS控制文字只显示两行,超出部分显示省略号
JS控制文字只显示两行,超出部分显示省略号 由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jq ...
- JS Array.slice 截取数组的实现方法
这篇文章主要介绍了JS Array.slice 截取数组的实现方法,因为我们需要控制一下长度,需要的朋友可以参考下 slice定义和用法 slice() 方法可从已有的数组中返回选定的元素. 语法 a ...
- 基于PaddleOCR开发Auto.js Pro文字识别插件
目录 目的 准备工作 插件开发 1.项目结构对比 2.插件SDK集成 3.调整assets资源 4.删除无用的Activity文件 5.修改AndroidManifest.xml 6.修改Predic ...
- js 复制文字和图片到剪贴板
js 复制文字和图片到剪贴板 最近有个需求,要同时复制多张图片和文字到剪贴板,网上找了好多方法,都不行,最后上个厕所,想到直接翻w3c文档,终于实现了.让大家不迷路,共享出来,不用谢,点赞就行. 不多 ...
- 原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
最新文章
- ubuntu 在firefox,网页听不了音乐
- c#设计模式-工厂方法
- echarts toolbox 自定义工具
- overall error
- wps怎么投递简历发到boss直聘_央视新闻联合BOSS直聘带“岗”年薪超82亿元
- SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析
- GitHub 上100个优质前端项目整理,值得收藏!
- python中cursor操作数据库(转)
- 如何让知识图谱告诉你“故障根因”
- 三星Galaxy Note 10 Pro渲染图曝光:挖孔屏+前摄居中
- linux程序已经在后台运行冻结了_让linux下程序永远后台运行
- dede采集-织梦全自动采集插件-织梦免费采集插件
- 手机号身份证号码验证正则表达式包含台湾香港澳门
- 驱动开发笔记3—SSDT表详解
- Codeforces 582B Once Again...【思维YY+Dp(LIS)】好题~
- PS制作五彩抽象人像
- Linux系统信息收集
- HTML5期末大作业:女装服装商城网站设计——女装服装商城(11页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页
- 球重力异常matlab程序,球体重力异常正演程序介绍.docx
- php热加载原理,什么是热更新?
热门文章
- web优化之-asp.net js延迟加载 js动态合并 js动态压缩
- java实现rabbitmq动态路由/话题模型(topic queues), 生产者 消费者 交换机 消息队列
- 个人管理 - 我是这样偷着做架构的
- centos oracle 修改监听服务名_Oracle-Oracle DB、监听和oem开机启动
- linux监控进程资源,linux系统资源监控命令
- (翻译)开始iOS 7中自动布局教程(二)
- 带参数的update mysql_mysql参数sql_update 说明
- 线程重命名java_线程重命名(Netty)和设计模式Decorator
- 计算机多媒体技术视差估计,立体视觉中视差估计算法研究
- C语言pop_back用法,【C语言】单链表的所有操作的实现(包括PopBack、PushBack、PopFront、PushFront、Insert)...