js获取div中文字的行数

最新推荐文章于 2023-06-07 10:06:22 发布

秋9

最新推荐文章于 2023-06-07 10:06:22 发布

阅读量5.8k

点赞数 3

分类专栏： JAVA

本文链接：https://blog.csdn.net/jlq_diligence/article/details/108762285

版权

JAVA 专栏收录该内容

317 篇文章 36 订阅

订阅专栏

js获取div中文字的行数，直接上代码。

核心代码为：

<div class="txt3" style="line-height:30px;">测试是具有试验性质的测量，即测量和试验的综合。而测试手段就是仪器仪表。由于测试和测量密切相关，在实际使用中往往并不严格区分测试与测量。测试的基本任务就是获取有用的信息，通过借助专门的仪器、设备，设计合理的实验方法以及进行必要的信号分析与数据。</div>

<script>

//高度/行高=文本行数
   var rowNum3=Math.round($(".txt3").height()/parseFloat($(".txt3").css('line-height')));
   $("#linenum3").html("当前有<font color='red'>"+rowNum3+"</font>行");
</script>

具体如下：

<body>
<div class="txt1" style="line-height:30px">我是测试文字<br>我是测试文字<br>我是测试文字<br>我测试是文字</div>
<div id="linenum1"></div>
<div style="height:30px;"></div>

<div class="txt2" style="line-height:30px;width:300px;">测试是具有试验性质的测量，即测量和试验的综合。而测试手段就是仪器仪表。由于测试和测量密切相关，在实际使用中往往并不严格区分测试与测量。测试的基本任务就是获取有用的信息，通过借助专门的仪器、设备，设计合理的实验方法以及进行必要的信号分析与数据。</div>
<div id="linenum2"></div>
<div style="height:30px;"></div>

<div class="txt3" style="line-height:30px;">测试是具有试验性质的测量，即测量和试验的综合。而测试手段就是仪器仪表。由于测试和测量密切相关，在实际使用中往往并不严格区分测试与测量。测试的基本任务就是获取有用的信息，通过借助专门的仪器、设备，设计合理的实验方法以及进行必要的信号分析与数据。</div>
<div id="linenum3"></div>
</body>

<script>
//高度/行高=文本行数
var rowNum1=Math.round($(".txt1").height()/parseFloat($(".txt1").css('line-height')));
   $("#linenum1").html("当前有<font color='red'>"+rowNum1+"</font>行");

var rowNum2=Math.round($(".txt2").height()/parseFloat($(".txt2").css('line-height')));
   $("#linenum2").html("当前有<font color='red'>"+rowNum2+"</font>行");

   var rowNum3=Math.round($(".txt3").height()/parseFloat($(".txt3").css('line-height')));
   $("#linenum3").html("当前有<font color='red'>"+rowNum3+"</font>行");

</script>