将一个长页面拆分为多个页面 [英] Splitting a long page into a number of pages

问题描述

我想将包含一些图像的长文本输入的动态内容拉入具有固定宽度(300px)和高度(1000px)的div中，挑战是我不能在css中使用overflow:auto内容的长度超过了 div 的高度(1000 像素)，相反，我被要求将长内容拆分为带有分页的页面.

I want to pull a dynamic content, which consists of a long text input with some images, into a div with a fixed width (300px) and height (1000px), the challenge is I cannot use overflow: auto in css when the content's length is exceeding the div's height (1000px), instead, I am asked to split the long content into pages with a pagination.

是否可以使用 PHP 来实现，还是必须使用 javascript (jquery)?

Is it possible to achieve with PHP or do I have to use javascript (jquery)?

我本来想统计一下字符数，然后把它们分开，但是当内容带有不同大小的图像时似乎不太正确...

I was thinking to count the number of characters and splitting them, but it doesn't seem correct when the content comes with different sizes of images...

有什么想法吗??

推荐答案

这在服务器端做起来可能很复杂(我想说不可能")，因为有太多的客户端效果无法做到't 被计算(边距、填充、行高、字体大小和用户缩放设置的浏览器默认设置)，我更愿意在客户端执行此操作.

This might be very complicated(I'd like to say "impossible") to do it on the serverside, because there are too many clientside effects that can't be calculated(browser-default-settings for margins, paddings, line-height, font-size and user-setting for zooming), I would prefer to do this on clientside.

我用jQuery做了一个小例子:http://jsfiddle.net/doktormolle/XwUuA/

I made a little example using jQuery: http://jsfiddle.net/doktormolle/XwUuA/

它获取目标元素的子节点，并将它们包装成与目标元素具有相同尺寸的新元素(只要包装器的高度不超过目标元素的高度).

It takes the childnodes of the target-element, and wraps them into new elements which have the same dimensions like the target-element(as long as the height of the wrapper does'nt exceed the height of the target-element).

也许对你有用(是草稿，当然还是要根据你的需要来做)

Maybe it's useful to you(It's a draft, of course there still has to be worked on it to match your needs)

这篇关于将一个长页面拆分为多个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！