用原生js统计文本行数的简单示例
更新时间：2016年08月19日 15:32:52 投稿：daisy
这篇文章我们来看看如何利用原生的JavaScript实现统计文本的行数，代码实现起来很简单，有需要的可以参考借鉴。
前言
在开发的时候会遇到这种情况，只显示两行，如果超过两行，则显示一个“显示更多”的按钮，点击按钮来显示剩余行的内容。有个 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实现获取浏览器版本，javascript实现获取浏览器类型两大方面，对这方面感兴趣的朋友可以参考一下2015-12-12
大家都知道在ES7中有了标准的回调函数嵌套的解决方案，新增了 async/await两个关键词，所以这篇文章主要给大家介绍了关于Javascript中如何利用Await减少回调嵌套的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要介绍了JS+CSS实现仿新浪微博搜索框的方法,实例分析了javascript针对搜索框样式的控制技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
页面滚动条处于低端,点击回到顶部，并且隐藏掉，具体实现代码如下，感兴趣的朋友可以参考下哈2013-06-06
这篇文章主要介绍了javaScript 逻辑运算符使用技巧整理的相关资料,需要的朋友可以参考下2017-05-05
抽奖系统是一种常见的功能,可以用于各种活动和网站,这篇文章主要给大家介绍了关于JavaScript实现2种常见的抽奖效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家介绍了JavaScript如何安全的进行数据获取方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
Async / Await是人们期待已久的JavaScript功能，它使使用异步功能更加有趣和易于理解。这篇文章主要给大家介绍了关于Javascript中异步等待的相关资料,需要的朋友可以参考下2021-05-05
这篇文章介绍了jQuery随便控制任意div隐藏的方法，有需要的朋友可以参考一下2013-06-06
用户可以发送小程序卡片给微信好友或者群,点击小程序卡片可以直接进入小程序,这篇文章主要给大家介绍了关于微信小程序分享卡片花样玩法之私密消息和动态消息的相关资料,需要的朋友可以参考下2023-11-11
最新评论