今天在跳板群那里看到一个神奇的样式,效果:

感觉十分神奇,因为一开始以为他是只有一个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实现文字截取(雾)相关推荐

  1. php 让字体闪烁,js实现文字闪烁特效的方法

    本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...

  2. 文字转语音+html5,JS实现文字转语音并播放

    html: div> audio> div> js: function doTTS() { var ttsDiv = document.getElementById('bdtts_d ...

  3. 使用JS实现文字搬运工

    使用JS实现文字搬运工 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><meta http-equiv=&quo ...

  4. php实现文字向左跑马灯,js实现文字跑马灯效果

    js实现文字超过显示宽度每间隔1s自动向左滚动显示 *{ margin:0; padding:0;} body{font:12px/1 '微软雅黑';} .wrapper{font-size: 0.8 ...

  5. JS控制文字只显示两行,超出部分显示省略号

    JS控制文字只显示两行,超出部分显示省略号 由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jq ...

  6. JS Array.slice 截取数组的实现方法

    这篇文章主要介绍了JS Array.slice 截取数组的实现方法,因为我们需要控制一下长度,需要的朋友可以参考下 slice定义和用法 slice() 方法可从已有的数组中返回选定的元素. 语法 a ...

  7. 基于PaddleOCR开发Auto.js Pro文字识别插件

    目录 目的 准备工作 插件开发 1.项目结构对比 2.插件SDK集成 3.调整assets资源 4.删除无用的Activity文件 5.修改AndroidManifest.xml 6.修改Predic ...

  8. js 复制文字和图片到剪贴板

    js 复制文字和图片到剪贴板 最近有个需求,要同时复制多张图片和文字到剪贴板,网上找了好多方法,都不行,最后上个厕所,想到直接翻w3c文档,终于实现了.让大家不迷路,共享出来,不用谢,点赞就行. 不多 ...

  9. 原生js实现文字循环向上滚动效果

    原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...

最新文章

  1. ubuntu 在firefox,网页听不了音乐
  2. c#设计模式-工厂方法
  3. echarts toolbox 自定义工具
  4. overall error
  5. wps怎么投递简历发到boss直聘_央视新闻联合BOSS直聘带“岗”年薪超82亿元
  6. SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析
  7. GitHub 上100个优质前端项目整理,值得收藏!
  8. python中cursor操作数据库(转)
  9. 如何让知识图谱告诉你“故障根因”
  10. 三星Galaxy Note 10 Pro渲染图曝光:挖孔屏+前摄居中
  11. linux程序已经在后台运行冻结了_让linux下程序永远后台运行
  12. dede采集-织梦全自动采集插件-织梦免费采集插件
  13. 手机号身份证号码验证正则表达式包含台湾香港澳门
  14. 驱动开发笔记3—SSDT表详解
  15. Codeforces 582B Once Again...【思维YY+Dp(LIS)】好题~
  16. PS制作五彩抽象人像
  17. Linux系统信息收集
  18. HTML5期末大作业:女装服装商城网站设计——女装服装商城(11页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页
  19. 球重力异常matlab程序,球体重力异常正演程序介绍.docx
  20. php热加载原理,什么是热更新?

热门文章

  1. web优化之-asp.net js延迟加载 js动态合并 js动态压缩
  2. java实现rabbitmq动态路由/话题模型(topic queues), 生产者 消费者 交换机 消息队列
  3. 个人管理 - 我是这样偷着做架构的
  4. centos oracle 修改监听服务名_Oracle-Oracle DB、监听和oem开机启动
  5. linux监控进程资源,linux系统资源监控命令
  6. (翻译)开始iOS 7中自动布局教程(二)
  7. 带参数的update mysql_mysql参数sql_update 说明
  8. 线程重命名java_线程重命名(Netty)和设计模式Decorator
  9. 计算机多媒体技术视差估计,立体视觉中视差估计算法研究
  10. C语言pop_back用法,【C语言】单链表的所有操作的实现(包括PopBack、PushBack、PopFront、PushFront、Insert)...