用原生js统计文本行数的简单示例


Posted in Javascript onAugust 19, 2016

前言

在开发的时候会遇到这种情况,只显示两行,如果超过两行,则显示一个“显示更多”的按钮,点击按钮来显示剩余行的内容。有个 jQuery 的插件 loadingDots 专门实现了这个功能。不过今天这里我们要用原生的Javascript来实现,要实现这个需求,最关键的是要确定这个容器内文本的行数,得到行数后,修改元素高度,并确定是否显示加载按钮。

window.getComputedStyle()

要使用原生 JavaScript 代码获取一个元素的各个 style 属性,使用 window.getComputedStyle() 是必然的。它可以返回一个 HTML 元素在浏览器中真正显示时的各个样式——当然,有些样式会被浏览器给屏蔽,比如,你要获取一个链接的颜色,并准备通过颜色来判断用户是否访问过某个地址,那肯定是不行的。

该方法返回的,是一个样式键值对,是 CSSStyleDeclaration 的实例。各属性索引名没有 - ,且采用驼峰命名法。比如 lineHeight

行数 = 整体高度 / 行高

整体高度通过 height 可以获取。行高可以通过 lineHeight 获取,将其结果再取整即可得到行数。

但有个问题,如果没有针对一个元素设置 line-height 值,则其默认值为 normal ,这个值在桌面浏览器中通常是 1.2 ,但还与字体有关。因此,最好是对需要计算行数的元素设置一下 line-height 值。

一个简单的实现如下:

function countLines(ele) {
 var styles = window.getComputedStyle(ele, null);
 var lh = parseInt(styles.lineHeight, 10);
 var h = parseInt(styles.height, 10);
 var lc = Math.round(h / lh);
 console.log('line count:', lc, 'line-height:', lh, 'height:', h);
 return lc;
}

完整代码示例

<!DOCTYPE html>
<html>
<head>
 <title>Line Count</title>
 <style type="text/css">
  p {
   line-height: 1.3em;
  }
 </style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<p id="target">She just made having a baby look lovely. Everything is white and she always has a fresh blueberry pie that's steaming and scones and clotted cream and she's reading The Old Man and the Sea and her little boy is rolly with bonnets. It's amazing, and I thought this is lovely. My kid is like playing with like explosive devices. I don't know where she's found them, like sticking them in our dog's ear. She already knows how to dry wall cause she puts holes in the wall.<br />
“今天的中国人一如当年的德国人,沉迷于‘崛起'幻觉,习惯于听信他人的吹捧,还想当然地认为只要中国继续保持经济增长,不仅未来的经济总量超越‘世界老大'美国可以期待,中国实现全面复兴也将是囊中之物。”上海外国语大学国际关系与公共事务学院教授程亚文在其新著《大国战略力》中尖锐地指出中国现下有不少人陷入了“盛世”幻觉,并没有意识到在经济总量的背后,中国其实还是一个极为落后的国家。世界上还没有一个大国是在风平浪静中兴起的,中国的新一轮文明复兴也将充满风险和曲折。防止国家崩溃、解体或衰败应该成为中国国家战略的重中之重。染上“软乎乎的幸福主义”只会让一个国家变得脆弱。
</p>
<p>行数:<span id="shower"></span></p>
改变窗口大小,自动计算
<button onclick="countLines()">立刻计算</button>

<script type="text/javascript">
var target = document.getElementById('target');
var shower = document.getElementById('shower');

function countLines(ele) {
 var styles = window.getComputedStyle(ele, null);
 var lh = parseInt(styles.lineHeight, 10);
 var h = parseInt(styles.height, 10);
 var lc = Math.round(h / lh);
 console.log('line count:', lc, 'line-height:', lh, 'height:', h);
 return lc;
}

function change() {
 shower.innerHTML = countLines(target);
}
window.onresize = change;
change();
</script>
</body>
</html>
[/html]

总结

以上就是本文的全部内容,希望本文的内容对大家使用Javascript能有所帮助。如果有疑问可以留言讨论。

Javascript 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
js实现数字滚动特效
Dec 16 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
jQuery购物网页经典制作案例
Aug 19 #Javascript
手机Web APP如何实现分享多平台功能
Aug 19 #Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 #Javascript
js实现select选择框效果及美化
Aug 19 #Javascript
JavaScript面向对象编写购物车功能
Aug 19 #Javascript
javascript设计模式之module(模块)模式
Aug 19 #Javascript
JS实现六位字符密码输入器功能
Aug 19 #Javascript
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
php中的数组操作函数整理
2008/08/18 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php获取错误信息的方法
2015/07/17 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
Django中url的反向查询的方法
2018/03/14 Python
pip命令无法使用的解决方法
2018/06/12 Python
代码详解django中数据库设置
2019/01/28 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python多进程间通信代码实例
2019/09/30 Python
Python Celery多队列配置代码实例
2019/11/22 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
如何删除一个表里面的重复行
2013/07/13 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
离婚协议书格式
2014/11/21 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Python语言内置数据类型
2022/02/24 Python
nginx常用配置conf的示例代码详解
2022/03/21 Servers