将一长页分成多页 [英] Splitting a long page into a number of pages

问题描述

我想将包含一些图像的长文本输入的动态内容提取到具有固定宽度(300px)和高度(1000px)的div中，挑战是我不能使用溢出:内容的长度超过了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...

任何想法?

推荐答案

在服务器端执行此操作可能非常复杂(我想说不可能")，因为存在太多的客户端影响，要计算出来(浏览器的默认设置，边距，填充，行高，字体大小和用户设置的缩放比例)，我宁愿在客户端执行此操作.

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屋！