用原生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 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
基于openlayers实现角度测量功能
Sep 28 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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
python算法学习之基数排序实例
2013/12/18 Python
详解Swift中属性的声明与作用
2016/06/30 Python
python如何将多个PDF进行合并
2019/08/13 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
会计专业自荐信
2013/12/02 职场文书
三潭印月的导游词
2015/02/12 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
李强优秀员工观后感
2015/06/16 职场文书
简短清晨问候语
2015/11/10 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL