如何为超越内容创建新的页面元素？ [英] How to create new page element for exceed content?
本文介绍了如何为超越内容创建新的页面元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试创建一些< page>< / page> class a4 ，具体取决于at内容的数量。如果内容超过< page>< / page> 的高度，我想创建一个新的< page><
falsedata-console =truedata-babel =false>
var element = document.getElementsByClassName（'a4'）[0]; var editorHeight = element.offsetHeight; var pages = element.childElementCount * 1123; var pageNumber = element.getElementsByClassName（'a4'）。length + 1; if （editorHeight< page）{var newPage = document.createElement（'page'）; newPage.setAttribute（'size'，'A4'）; newPage.setAttribute（'class'，'a4'）; newPage.dataset.pages = pageNumber; element.appendChild（newPage）;}
body {background： rgb（204,204,204）;} page {background：white;显示：块; text-align：justify; margin：20px;边缘底部：0.5厘米; box-shadow：0 0 0.5cm rgba（0，0，0，0.5）;} page [size =A4] {width：21cm;身高：29.7cm; padding：20px;} @ media print {body，page {margin：0; box-shadow：0; }
< page size =A4>与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式转载，并附有H. Rackham在1914年的英文译本。与流行的观点相反，Lorem Ipsum不仅仅是随机文本。它源于公元前45年的一段古典拉丁文学，已有2000多年历史。弗吉尼亚汉普顿悉尼学院的拉丁教授理查德麦克林托克查阅了Lorem Ipsum段落中较为晦涩的拉丁词，consectetur之一，并且通过古典文学中的这个词的引用，发现了这个毫无疑问的来源。 Lorem Ipsum来自Cicero的de Finibus Bonorum et Malorum（极端的善恶）的第1.10.32和1.10.33节，写于公元前45年。本书是关于伦理学的论文，在文艺复兴时期非常流行。 Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自1.10.32节的一行。 Lorem Ipsum从16世纪开始使用的标准块在下面转载给那些感兴趣的人。 Cicero的de Finibus Bonorum et Malorum第1.10.32和1.10.33部分也以原始形式复制，并附有H. Rackham的1914年英文译本。< / page> <页面时， 我创建了class ='a4'>< / page> ，但我无法获取超出的内容并将它们放入新创建的页面 。 如何才能让新页面充满超出前一页的内容？
解决方案
如果您使用 Summer Note 或类似类型的HTML编辑器，我们可以消除在HTML中有文本节点，因为这些编辑器通常将所有内容都包含在< p> 标签中。例如，如果您编写以下代码：
这是第一行
这是第二行
这是第三行
编辑器会生成这样的HTML。
< p>这是第一行< / p>
< p>这是第二行< / p>
< p>这是第三行< / p>
生成的HTML也可以包含表格，列表并且可能是图片，
< h2>标题< / h2>
< p> 2-3行段< / p>
< hr><！ - 仅用于美化 - >
< table> ...< / table>
< ul>< li>无序列表< / li>< / ul>
< ol>< li>无序列表< / li>< / ol>
< p>< img src =＃alt =图片>< / p>
有无法我们可以将它们拆分成没有任何权衡即可。所以如果我们好的有一些权衡，我们可以完成这项工作。这些HTML编辑器的一个好处是他们倾向于生成主要块级元素作为页面的直接子元素。因此，通过计算每个Block元素子元素的位置和高度，我们可以通过简单算法检查子元素是否适合页面，如果不是，则将其移动到下一页。
body {background：rgb（204，204，204）;} page {position：relative; / *这是强制性的* /背景：白色;显示：块; text-align：justify; margin：20px;边缘底部：0.5厘米; box-shadow：0 0 0.5cm rgba（0，0，0，0.5）;} page [size =A4] {width：21cm;身高：29.7cm; padding：20px; overflow：hidden;} @ media print {body，page {margin：0; box-shadow：0; }}。page-number {position：absolute;底部：8px; left：8px; font-size：12px; color：＃9e4200de;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><page size =A4>< p>< span style =color：inherit; font-family：inherit; font-size：14px;>< / span>< / p>< h2 class =entry-title fusion-post-titledata-fontsize =18data-lineheight =27style =color：rgb（51,51,51）; margin-top：0px; margin-bottom：28px; font-size：18px; font-family：museo-slab -300，Arial，Helvetica，sans-serif; line-height：27px; padding-bottom：0px;> Blog Image Post< / h2>< h2>< div class =post-contentstyle = >< p style =text-align：center; color：rgb（116,116,116）; font-family：& quot; PT Sans& quot;，Arial，Helvetica，sans-serif; font- size：13px; margin-bottom：20px;>< img src =https://www.jqueryscript.net/images/Universal-Placeholder-Text-Lorem-Ipsum-Generator-getlorem.jpgstyle = width：425px;>< span style =color：rgb（107,113,122）;>< br>< / span>< / p>< p style =color：rgb（116，116，116）; font-family：PT Sans& quot;，Arial，Helvetica，sans-serif; font-size：13px; margin-bottom：20px;>< span style =color：rgb（107，113，122）;>与流行的观点相反，Lorem Ipsum不是简单的随机文本，而是根植于一段古典拉丁文学，从公元前45年开始，使它有2000多年的历史，弗吉尼亚州汉普顿 - 悉尼学院的拉丁教授理查德麦克林托克（Richard McClintock）抬头看看< / span>< span style =color：rgb（107，113 ，122）;>>从Lorem Ipsum的一段经文中，一个比较模糊的拉丁词，consectetur，经过古典文献中单词的引用，发现了这个毫无疑问的来源。< / span>< / p> < h3 style =color：rgb（116，116，116）; font-family：PT Sans& quot;，Arial，Helvetica，sans-serif; font-size：13px; margin-bottom：20px;>< ul style =box-sizing：inherit;颜色：rgb（0，0，0）; font-family：Verdana，sans-serif; < li style =box-sizing：inherit;> Item< / li>< li style =box-sizing：inherit;> Item< / li><< font-size：15px; ; li style =box-sizing：inherit;> Item< / li>< li style =box-sizing：inherit;> Item< / li>< / ul>< / h3><< ; h3 style =color：rgb（116，116，116）; font-family：PT Sans& quot;，Arial，Helvetica，sans-serif; font-size：13px; Lorem Ipsum来自& nbsp;de Finibus Bonorum& nbsp;< span style =color：rgb（107,113,122）的第1.10.32和1.10.33节;这本书是一部关于伦理学的论文，在文艺复兴时期非常流行。< / span>< br>< / h3>< ol style =box-sizing：inherit;颜色：rgb（0，0，0）; font-family：Verdana，sans-serif; < li style =box-sizing：inherit;>第一项< / li>< li style =box-sizing：inherit;>第二项< / li> ;< li style =box-sizing：inherit;>第三项< / li>< li style =box-sizing：inherit;>第四项< / li>< / ol>< p style =color：rgb（116，116，116）; font-family：PT Sans& quot;，Arial，Helvetica，sans-serif; font-size：13px; margin-bottom：20px;>< span style =color：rgb（107，113，122）;> Lorem Ipsum的第一行Lorem ipsum dolor sit amet ..来自一行在< / span>< span style =color：rgb（107，113，122）;>& nbsp; 1.10.32。& nbsp;< / span>< span style =color ：rgb（107,113,122）;> Lorem Ipsum自从16世纪以来使用的标准块在下面转载给那些有兴趣的人，Cicero的de Finibus Bonorum et Malorum的第1.10.32和1.10.33节也是以其精确的原始形式再现，由H. Rackham的1914年版的英文和& nbsp;< / span>< span style =color：rgb（107,113,122） / span>< / p>< table id =exampleclass =ui celled table dataTablecellspacing =0width =100％role =gridaria-describeby =example_infostyle =盒子大小：继承;边界崩溃：分开;宽度：865px;背景：rgb（255,255,255）; margin：0px; border：1px solid rgba（34，36，38，0.15）; box-shadow：none;边界半径：0.285714rem;颜色：rgba（0，0，0，0.87）; font-size：14px; font-family：Lato，Helvetica Neue& quot;，Arial，Helvetica，sans-serif;>< thead style =box-sizing：inherit; box-shadow：none;>< tr role =rowstyle =box-sizing：inherit;>< th class =sorting_asctabindex =0aria-controls =examplerowspan =1colspan =1aria-sort =ascendingaria-label =Name：activate to sort column descendingstyle =box-sizing：content-box; margin：0px;填充：0.928571em 20px 0.928571em 0.785714em; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动;背景：rgb（249,250,251）; vertical-align：inherit; border-bottom-width：1px; border-bottom-color：rgba（34,36,38,0.1）; border-left：none;位置：相对; border-radius：0.285714rem 0px 0px; width：137px;> Name< th>< th class =sortingtabindex =0aria-controls =examplerowspan =1colspan =1aria-label =Position：activate按列升序style =box-sizing：content-box; margin：0px;填充：0.928571em 20px 0.928571em 0.785714em; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动;背景：rgb（249,250,251）; vertical-align：inherit; border-bottom-width：1px; border-bottom-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;位置：相对; width：224px;> Position< th class =sortingtabindex =0aria-controls =examplerowspan =1colspan =1aria-label =Office：activate按列升序style =box-sizing：content-box; margin：0px;填充：0.928571em 20px 0.928571em 0.785714em; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动;背景：rgb（249,250,251）; vertical-align：inherit; border-bottom-width：1px; border-bottom-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;位置：相对;宽度：104px;> Office< th>< th class =sortingtabindex =0aria-controls =examplerowspan =1colspan =1aria-label =Age：activate按列升序style =box-sizing：content-box; margin：0px;填充：0.928571em 20px 0.928571em 0.785714em; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动;背景：rgb（249,250,251）; vertical-align：inherit; border-bottom-width：1px; border-bottom-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;位置：相对;宽度：39px;>年龄< th< th class =sortingtabindex =0aria-controls =examplerowspan =1colspan =1aria-label =开始日期：激活按列升序style =box-sizing：content-box; margin：0px;填充：0.928571em 20px 0.928571em 0.785714em; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动;背景：rgb（249,250,251）; vertical-align：inherit; border-bottom-width：1px; border-bottom-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;位置：相对;宽度：85px;>开始日期< th>< th class =sortingtabindex =0aria-controls =examplerowspan =1colspan =1aria-label =Salary：激活按列升序style =box-sizing：content-box; margin：0px;填充：0.928571em 20px 0.928571em 0.785714em; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动;背景：rgb（249,250,251）; vertical-align：inherit; border-bottom-width：1px; border-bottom-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;位置：相对; border-radius：0px 0.285714rem 0px 0px; width：83px;> Salary< / th>< / tr>< / thead>< tfoot style =box-sizing：inherit; box-shadow：none;>< tr style =box-sizing：inherit;>< th rowspan =1colspan =1style =box-sizing：content-box; margin：0px;填充：0.785714em; font-weight：400; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动; border-top-color：rgba（34,36,38,0.15）;背景：rgb（249,250,251）; vertical-align：middle; border-left：none; border-radius：0px 0px 0px 0.285714rem;> Name< th>< th rowspan =1colspan =1style =box-sizing：content-box; margin：0px;填充：0.785714em; font-weight：400; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动; border-top-color：rgba（34,36,38,0.15）;背景：rgb（249,250,251）; vertical-align：middle; border-left：1px solid rgba（34,36,38,0.1）;>第< th rowspan =1colspan =1style =box-sizing：content-box; margin：0px;填充：0.785714em; font-weight：400; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动; border-top-color：rgba（34,36,38,0.15）;背景：rgb（249,250,251）; vertical-align：middle; border-left：1px solid rgba（34,36,38,0.1）;> Office< th rowspan =1colspan =1style =box-sizing：content-box; margin：0px;填充：0.785714em; font-weight：400; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动; border-top-color：rgba（34,36,38,0.15）;背景：rgb（249,250,251）; vertical-align：middle; border-left：1px solid rgba（34,36,38,0.1）;>年龄>< th rowspan =1colspan =1style =box-sizing：content-box; margin：0px;填充：0.785714em; font-weight：400; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动; border-top-color：rgba（34,36,38,0.15）;背景：rgb（249,250,251）; vertical-align：middle; border-left：1px solid rgba（34,36,38,0.1）;>开始日期< th rowspan =1colspan =1style =box-sizing：content-box; margin：0px;填充：0.785714em; font-weight：400; text-align：inherit;过渡：背景0.1s缓解，颜色0.1s缓解;光标：自动; border-top-color：rgba（34,36,38,0.15）;背景：rgb（249,250,251）; vertical-align：middle; border-left：1px solid rgba（34,36,38,0.1）; border-radius：0px 0px 0.285714rem;> Salary< / th>< / tr>< / tfoot>< tbody style =box-sizing：inherit;>< tr role =row class =oddstyle =box-sizing：inherit;>< td class =sorting_1style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top：none; border-left：none;> Airi Satou< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top：none; border-left：1px solid rgba（34,36,38,0.1）;>会计< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top：none; border-left：1px solid rgba（34,36,38,0.1）;> Tokyo< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top：none; border-left：1px solid rgba（34,36,38,0.1）;> 33< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top：none; border-left：1px solid rgba（34,36,38,0.1）;> 2008/11/28< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top：none; border-left：1px solid rgba（34,36,38,0.1）;> $ 162,700< / td>< / tr>< tr role =rowclass =evenstyle =box-sizing ：inherit;>< td class =sorting_1style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top-color：rgba（34,36,38,0.1）; border-left：none;> Angelica Ramos< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;>首席执行官（CEO）< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;> London< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;> 47< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;> 2009/10/09< / td>< td style =box-sizing：content-box; margin：0px;填充：0.785714em;过渡：背景0.1s缓解，颜色0.1s缓解; text-align：inherit; border-top-color：rgba（34,36,38,0.1）; border-left：1px solid rgba（34,36,38,0.1）;> $ 1,200,000< / td>< / tr>< / tbody>< / table>< p style =color：rgb （116,116,116）; font-family：PT Sans& quot;，Arial，Helvetica，sans-serif; font-size：13px; margin-bottom：20px;>< br>< / p>< p style =color：rgb（116，116，116）; font-family：PT Sans& quot;，Arial，Helvetica，sans-serif; font-size：13px; margin-bottom：20px;>< br>< / p>< / div>< / h2>< p>< span style =color：rgb（116，116，116）;字体家族：PT Sans& quot; Arial，Helvetica，sans-serif;> Nunc tincidunt，elit non cursus euismod，lacus augue ornare metus，egestas imperdiet nulla nisl quis mauris。Suspendisse a pharetra urna。 Morbi dui lectus，pharetra nec elementum eget，vulputate ut nisi。Aliquam accumsan，nulla sed feugiat vehicula，lacus justo semper libero，quis porttitor turpis odio sit amet ligula。Duis dapibus fermentum orci，nec malesuada libero vehicula ut。< / span> < p>< p>< span style =color：rgb（116，116，116）; font-family：& quot; PT Sans& quot;，Arial，Helvetica，sans-serif;> Integer sodales，urna eget interdum eleifend，nulla nibh laoreet nisl，quis dignissim mauris dolor eget mi。Donec at mauris enim。 Duis nisi tellus，adipiscing a convallis quis，tristique vitae risus。Nullam molestie gravida lobortis。Proin ut nibh quis felis auctor ornare。Cras ultricies，nibh at mollis faucibus，justo eros porttitor mi，quis auctor lectus arcu sit amet nunc。< span>< / p>< p>< span style =color：rgb（116，116，116）;字体家族：PT Sans& quot; Arial，Helvetica，sans-serif;> Nunc tincidunt，elit non cursus euismod，lacus augue ornare metus，egestas imperdiet nulla nisl quis mauris。Suspendisse a pharetra urna。 Morbi dui lectus，pharetra nec elementum eget，vulputate ut nisi。Aliquam accumsan，nulla sed feugiat vehicula，lacus justo semper libero，quis porttitor turpis odio sit amet ligula。Duis dapibus fermentum orci，nec malesuada libero vehicula ut。< / span> < p>< p>< span style =color：rgb（116，116，116）; font-family：& quot; PT Sans& quot;，Arial，Helvetica，sans-serif;> Integer sodales，urna eget interdum eleifend，nulla nibh laoreet nisl，quis dignissim mauris dolor eget mi。Donec at mauris enim。 Duis nisi tellus，adipiscing a convallis quis，tristique vitae risus。Nullam molestie gravida lobortis。Proin ut nibh quis felis auctor ornare。Cras ultricies，nibh at mollis faucibus，justo eros porttitor mi，quis auctor lectus arcu sit amet nunc。< span>< / p>< div>< p>< span style =color：rgb（116，116，116）;字体家族：PT Sans& quot; Arial，Helvetica，sans-serif;> Nunc tincidunt，elit non cursus euismod，lacus augue ornare metus，egestas imperdiet nulla nisl quis mauris。Suspendisse a pharetra urna。 Morbi dui lectus，pharetra nec elementum eget，vulputate ut nisi。Aliquam accumsan，nulla sed feugiat vehicula，lacus justo semper libero，quis porttitor turpis odio sit amet ligula。Duis dapibus fermentum orci，nec malesuada libero vehicula ut。< / span> < p>< p>< span style =color：rgb（116，116，116）; font-family：& quot; PT Sans& quot;，Arial，Helvetica，sans-serif;> Integer sodales，urna eget interdum eleifend，nulla nibh laoreet nisl，quis dignissim mauris dolor eget mi。Donec at mauris enim。 Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</ span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style=\"color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;\">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><p><br></p></page>I tried to create a number of <page></page> class a4 depending on at the amount of content inside it. If the content exceed the height of <page></page>, I would like to create a new <page></page> for content that exceed from previous page.
var element = document.getElementsByClassName('a4')[0];
var editorHeight = element.offsetHeight;
var pages = element.childElementCount * 1123;
var pageNumber = element.getElementsByClassName('a4').length + 1;
if (editorHeight < pages) {
var newPage = document.createElement('page');
newPage.setAttribute('size', 'A4');
newPage.setAttribute('class', 'a4');
newPage.dataset.pages = pageNumber;
element.appendChild(newPage);
}
body {
background: rgb(204, 204, 204);
}
page {
background: white;
display: block;
text-align: justify;
margin: 20px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
padding: 20px;
}
@media print {
body,
page {
margin: 0;
box-shadow: 0;
}
}
<page size="A4">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from
sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered
the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum
et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites
of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from
a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since
the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from
sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered
the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum
et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites
of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from
a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since
the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from
sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered
the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum
et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</page>
From above code, as I inspected the new <page class='a4'></page> was created but I could not get the exceed content and put them in a new created page.
How can I do to get new page filled with exceed content from previous page?
解决方案
If you use Summer Note or similar type of html editor, we can eliminate the idea of having text nodes in your html, because these editors normally wrap everything within <p> tags. For example if you write the following
This is First Line
This is Second Line
This is Third Line
The editor will generate HTML like this.
<p>This is First Line</p>
<p>This is Second Line</p>
<p>This is Third Line</p>
The generated HTML can also have Tables, Lists and may be Images,
<h2>A Title</h2>
<p>A 2-3 line paragraph</p>
<hr><!-- just to prettify -->
<table>...</table>
<ul><li>An Un-ordered List</li></ul>
<ol><li>An Un-ordered List</li></ol>
<p><img src="#" alt="An Image"></p>
There is no way we can split them into pages without any trade-offs. So if we are okay with some trade-offs we can get this done. One good thing about these HTML Editors is that they tend to generate mostly Block level Elements as direct child to the page. So by calculating the position and height of each Block element child we can check if the child fits into the page with simple algorihtm or move it to the next page if it doesn't.
function arrangePage($pageElement, index) {
if (!index) index = 1;
var pageHeight = $pageElement.height();
var children = $pageElement.children();
for (var i = 0; i < children.length; i++) {
var child = children.eq(i);
if(i == 0 && child.height() > pageHeight) continue; /* Infinite loop fix :: explained in answer*/
var bottom = child.height() + child[0].offsetTop;
if (bottom < pageHeight) continue;
var newPage = $('<page size="A4">').appendTo('body').append(children.splice(i));
arrangePage(newPage, index + 1);
}
$('<span>').addClass('page-number').html('Page ' + index).appendTo($pageElement); /* Inerts Page Index*/
}
$(function() {
arrangePage($("page"));
});
body {
background: rgb(204, 204, 204);
}
page {
position: relative; /* This is mandatory */
background: white;
display: block;
text-align: justify;
margin: 20px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
padding: 20px;
overflow: hidden;
}
@media print {
body,
page {
margin: 0;
box-shadow: 0;
}
}
.page-number {
position: absolute;
bottom: 8px;
left: 8px;
font-size: 12px;
color: #9e4200de;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<page size="A4"><p><span style="color: inherit; font-family: inherit; font-size: 14px;"></span></p><h2 class="entry-title fusion-post-title" data-fontsize="18" data-lineheight="27" style="color: rgb(51, 51, 51); margin-top: 0px; margin-bottom: 28px; font-size: 18px; font-family: museo-slab-300, Arial, Helvetica, sans-serif; line-height: 27px; padding-bottom: 0px;">Blog Image Post</h2><h2><div class="post-content" style=""><p style="text-align: center; color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><img src="https://www.jqueryscript.net/images/Universal-Placeholder-Text-Lorem-Ipsum-Generator-getlorem.jpg" style="width: 425px;"><span style="color: rgb(107, 113, 122);"><br></span></p><p style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><span style="color: rgb(107, 113, 122);">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up </span><span style="color: rgb(107, 113, 122);">one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</span></p><h3 style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><ul style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, sans-serif; font-size: 15px;"><li style="box-sizing: inherit;">Item</li><li style="box-sizing: inherit;">Item</li><li style="box-sizing: inherit;">Item</li><li style="box-sizing: inherit;">Item</li></ul></h3><h3 style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum <span style="color: rgb(107, 113, 122);">et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</span><br></h3><ol style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, sans-serif; font-size: 15px;"><li style="box-sizing: inherit;">First item</li><li style="box-sizing: inherit;">Second item</li><li style="box-sizing: inherit;">Third item</li><li style="box-sizing: inherit;">Fourth item</li></ol><p style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><span style="color: rgb(107, 113, 122);">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section</span><span style="color: rgb(107, 113, 122);"> 1.10.32. </span><span style="color: rgb(107, 113, 122);">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English </span><span style="color: rgb(107, 113, 122);">versions from the 1914 translation by H. Rackham.</span></p><table id="example" class="ui celled table dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="box-sizing: inherit; border-collapse: separate; width: 865px; background: rgb(255, 255, 255); margin: 0px; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; border-radius: 0.285714rem; color: rgba(0, 0, 0, 0.87); font-size: 14px; font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;"><thead style="box-sizing: inherit; box-shadow: none;"><tr role="row" style="box-sizing: inherit;"><th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: none; position: relative; border-radius: 0.285714rem 0px 0px; width: 137px;">Name</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; width: 224px;">Position</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; width: 104px;">Office</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; width: 39px;">Age</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; width: 85px;">Start date</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; border-radius: 0px 0.285714rem 0px 0px; width: 83px;">Salary</th></tr></thead><tfoot style="box-sizing: inherit; box-shadow: none;"><tr style="box-sizing: inherit;"><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: none; border-radius: 0px 0px 0px 0.285714rem;">Name</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1);">Position</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1);">Office</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1);">Age</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1);">Start date</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1); border-radius: 0px 0px 0.285714rem;">Salary</th></tr></tfoot><tbody style="box-sizing: inherit;"><tr role="row" class="odd" style="box-sizing: inherit;"><td class="sorting_1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: none;">Airi Satou</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">Accountant</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">Tokyo</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">33</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">2008/11/28</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">$162,700</td></tr><tr role="row" class="even" style="box-sizing: inherit;"><td class="sorting_1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: none;">Angelica Ramos</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">Chief Executive Officer (CEO)</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">London</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">47</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">2009/10/09</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">$1,200,000</td></tr></tbody></table><p style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><br></p><p style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><br></p></div></h2><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: "PT Sans", Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><p><br></p></page>
这篇关于如何为超越内容创建新的页面元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
