文本多行最后一行溢出隐藏显示省略号
来源:互联网 发布:淘宝网为什么打不开了 编辑:程序博客网 时间:2024/06/12 17:11
有时候,需要一段文字,最后一行溢出隐藏显示省略号,这时候css已经不行了(我没找到方法)。
在网上略查了一下,大致思路是这样的:
把一段文字一个一个的放进p标签中,监测换行,达到我们需要的行数以后,把文本截断,最后添加省略号。
然后,就自己写了段简单的js,实现了这个效果。
效果是这样的:
下面是代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>多行省略</title><style>div{width: 200px;border: 1px solid #333;}p{font-size: 16px;line-height: 30px;padding: 0;margin: 0;white-space: pre-line;overflow: hidden;text-overflow: ellipsis;}</style><script src="jquery.min.js"></script></head><body><div><p class="p">今天的天气咋样今天的天气咋样今天的天气咋样今天的天气咋样今天的天气咋样今天的天气咋样今天的天气咋样</p></div><script>$(function(){function fierceEllipsis(className,n){var span = $(className);var txt = span.text();span.text('');var minH = span.height();var m = 0;for (var i = 1; i < txt.length+1; i++) {var t = txt.substring(0,i);span.text(t);var nowH = span.height();if (nowH != minH && m < n) {minH = nowH;m++;}else if (nowH != minH && m >= n) {t = txt.substring(0,i-2) + ' ...';span.text(t);break;}}}fierceEllipsis('.p',2);/** *使用方法: * 1. 依赖于jQuery,可以自己改成原生的 * 2. 调用函数fierceEllipsis(className,n) * 3. 传入两个值: *第一个值:要设置标签的class名(支持标签:p、span,,,,其它的自己去测试) *第二个值:该标签下一共要显示的行数,数字格式 * 4. 每设置一处地方就要调用一次 fierceEllipsis函数, * 为什么这样做?因为有可能所有要设置的地方要显示的行数不都是一样的 */})</script></body></html>
阅读全文
1 0
- 文本多行最后一行溢出隐藏显示省略号
- 多行文本溢出最后一行显示省略号
- NSTextField多行显示不下时,最后一行显示省略号
- 溢出文本显示省略号
- 溢出文本显示省略号
- 文本溢出显示省略号
- 文本溢出显示省略号
- 文本溢出显示省略号
- 超出文本显示省略号(包括一行和多行)
- css控制文本单行,多行溢出显示省略号
- 文本溢出:单行文本,多行文本溢出显示省略号
- 文字溢出隐藏显示省略号
- datagrid 溢出文本显示省略号
- CSS文本溢出显示省略号
- html文本溢出显示省略号(...)
- CSS3文本溢出显示省略号
- css文本溢出显示省略号
- [ css ]文本溢出显示省略号
- leetcode题解-82. Remove Duplicates from Sorted List II && 445. Add Two Numbers II
- 克隆二叉树
- noip2010 引水入城 bfs+贪心
- hibernate自动生成建表
- 开发可运行于Docker上的Spring Boot应用
- 文本多行最后一行溢出隐藏显示省略号
- Ubuntu如何安装setuptools
- 2017年7月13日21:31:13
- 解决百度富文本编辑不能上传视频成功但是在IE浏览器不能播放、显示的问题、解决浏览器不支持video标签
- windows下 zookeeper dubbo 安装+配置+demo 详细图文教程
- 1-关于Vue
- 学习spring4x
- MongoDB设置 Replication Sets
- day29 Linux02