css - 急急急！怎样才可以用JavaScript获取一个div内文字的长度？还有前端分页问题？

Question

现在有这样一个需求，用前端实现一个文本内容分页，一屏一页，一开始我想用CSS3的方法：把column-width设置为屏幕宽度，然后获取column-count就知道分了几页，用scrollLeft来切换页面，可是发现设置了column-width之后column-count并不会随之改变。。。醉了。。。
想了好几天了，也没想到什么更好的方案。。。。

所以我现在想用一个比较不优雅的办法，就是判断文本行数和行高，来确定一屏显示多少。可是如何才能获取p内文字的行数呢？

大家对于前端分页有什么更好的解决方法吗？

ps，我试了element.getClientRects().length，总是返回1，没办法获取行数。。

Answer 1

<p><span id="a">现在有这样一个需求，用前端实现一个文本内容分页，一屏一页，一开始我想用CSS3的方法：把column-width设置为屏幕宽度，然后获取column-count就知道分了几页，用scrollLeft来切换页面，可是发现设置了column-width之后column-count并不会随之改变。。。醉了。。。
想了好几天了，也没想到什么更好的方案。。。。
所以我现在想用一个比较不优雅的办法，就是判断文本行数和行高，来确定一屏显示多少。可是如何才能获取p内文字的行数呢？
大家对于前端分页有什么更好的解决方法吗？
ps，我试了element.getClientRects().length，总是返回1，没办法获取行数。。</span></p>

console.log(document.getElementById('a').getClientRects().length)

demo
http://jsbin.com/tokihuvoni/edit?html,js...

来自：http://efe.baidu.com/blog/text-truncatin...

Answer 2

如果非要这样的话就获取一个dom的字数然后看有没有办法搞到一行什么字尺寸几个字咯。。。前端不晓得

Answer 3

你这不叫分页吧，可以在外面套个父层overflow hidden，
内容p设置绝对定位，点下一页的时候，移动父层的高度就行了

Answer 4

之前处理过类似问题，如果容器宽度可以确定，那么一行能容纳多少字就可以确定。文字长度/
每行字数=行数，分页就自己发挥吧