脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript统计文本行数

用原生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里访问SharePoint列表数据的实现方法

    在Javascript里访问SharePoint列表数据的实现方法

    在进行SharePoint订制的时候经常会遇到开发手段受限制的问题，比如通常公司都会限制服务器的访问以及部署，很多开发都只能够在客户端来进行
    2011-05-05
  • IE和Firefox之间在JavaScript语法上的差异

    IE和Firefox之间在JavaScript语法上的差异

    这篇文章主要为大家详细介绍了IE和Firefox之间在JavaScript语法上的差异，在JavaScript语法上不同的7个方面，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript字符串检索字符的方法

    JavaScript字符串检索字符的方法

    这篇文章主要为大家详细介绍了JavaScript字符串检索字符的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • BootStrap 图片样式、辅助类样式和CSS组件的实例详解

    BootStrap 图片样式、辅助类样式和CSS组件的实例详解

    这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实现代码，图文并茂介绍的非常详细，需要的朋友参考下吧
    2017-01-01
  • 在线演示常用javascript特效

    在线演示常用javascript特效

    图形显示特效鼠标驱动图片变化随机显示banner图片随意移动图片定期消失字符连续消隐文字不停变色JavaScript容错...图片循环显现QQ菜单生成器图形显示特效连续滚动的图片图片水中倒影纯JavaScript时钟图片翻滚导航星星满天闪烁左侧的极酷...
    2008-04-04
  • 纯JS代码实现气泡效果

    纯JS代码实现气泡效果

    js气泡效果，在项目需求中经常遇到。今天小编把大概实现步骤分享到脚本之家平台，感兴趣的朋友可以参考下
    2016-05-05
  • 浅谈Rx响应式编程

    浅谈Rx响应式编程

    在学习Rx编程的过程中，理解Observable这个概念至关重要，常规学习过程中，通常需要进行多次碰壁才能逐渐开悟。这个有点像小时候学骑自行车，必须摔几次才能掌握一样。当然如果有办法能言传，则可以少走一些弯路，尽快领悟Rx的精妙
    2021-06-06
  • JavaScript中将number转为string的5种方法

    JavaScript中将number转为string的5种方法

    这篇文章主要给大家介绍了关于JavaScript中将number转为string的5种方法,在JavaScript的值类型转换中,最常发生的就是string与number这两种类型值之间的相互转换,需要的朋友可以参考下
    2023-07-07
  • JavaScript深拷贝和浅拷贝概念与用法实例分析

    JavaScript深拷贝和浅拷贝概念与用法实例分析

    这篇文章主要介绍了JavaScript深拷贝和浅拷贝概念与用法,结合实例形式较为详细的分析了javascript深拷贝与浅拷贝的概念、原理、用法及相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • JS刷新父窗口的几种方式小结(推荐)

    JS刷新父窗口的几种方式小结(推荐)

    下面小编就为大家带来一篇JS刷新父窗口的几种方式小结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论