javascript - 如何将较长的html文本拆分为具有特定高度的div

标签 javascript jquery html css asp.net

<分区>

我有来自数据库的动态 HTML 文本,它很长,我想将 HTML 文本拆分成具有固定高度的不同 div,如分页。

HTML 文本很长,例如:

<div id="content"><p></p><section style="width:100%;height:25px;"><div style="float:left;width:45%">A/G RATIO</div><div style="float:left;width:19%">2</div><div style="float:left;width:18%"></div><div style="float:left;width:18%">0.8 - 2</div></section><p></p><p></p><li style="font-size: 13px; margin-left: 6px; vertical-align: baseline; list-style-type: disc; background-color: transparent;" dir="ltr">
<ul style="margin-top: 0pt; margin-bottom: 0pt;">
    <li style="font-size: 13px; margin-left: -24px; vertical-align: baseline; list-style-type: disc; background-color: transparent;" dir="ltr"><span style="font-size: 13.3333px;">Not all foetal structural anomalies manifest or &nbsp;addressed on T2 U.S. Foetal &nbsp;&nbsp;&nbsp;biometry &amp; Estimated Foetal Wt. subject to statistical variation &amp; morphometry to technical limits</span><span style="font-size: 13.3333px; font-style: italic; vertical-align: baseline; white-space: pre-wrap; font-family: Questrial; background-color: transparent;">.</span><span style="font-size: 13.3333px;">&nbsp;Level II U.S &amp; Fetal Echo. indicated at &nbsp;20 Wks + &nbsp;in pregnancies at risk for foetal malformations. End Of report ( Films -2)&nbsp;</span><span style="font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap; font-family: Questrial; background-color: transparent;">Thanks for the courtesy of referral.
    <div id="radePasteHelper" style="border: 0px solid red; border-image-source: none; left: -10000px; top: 0px; width: 1px; height: 1px; overflow: hidden; ;">
    Not all foetal structural anomalies manifest or &nbsp;addressed on T2 U.S. Foetal &nbsp;&nbsp;&nbsp;biometry &amp; Estimated Foetal Wt. subject to statistical variation &amp; morphometry to technical limits
    .S &amp; Fetal Echo. indicated at &nbsp;20 Wks + &nbsp;in pregnancies at risk for foetal malformations.
    End Of report ( Films -2)Thanks for the courtesy of referral.
    </div>
    </span></li>
</ul>
</li><p></p><p><font face="Questrial" style="font-size: 15px; background-color: transparent; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"></font><font face="Questrial" style="font-size: 15px; background-color: transparent; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Obstetrical Ultrasound Exam. Twin Gestation (Level I)</font><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></p><ul style="margin-top: 0pt; margin-bottom: 0pt;"><li dir="ltr" style="list-style-type: disc; font-size: 19px; background-color: transparent; vertical-align: baseline; margin-left: 6px;"><h1 dir="ltr" style="line-height: 1; margin-top: 0pt; margin-bottom: 0pt;"><font face="Questrial" style="font-size: 15px; background-color: transparent; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;">Bichorionic, biamniotic, concordant live intrauterine twin pregnancies noted in lie: longitudinal cephalic ( Fetus A) &amp; podolic ( Fetus B). </font></h1></li><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: -18px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">Foetal cardiac activity &amp; body movements normally present. FHRs: &nbsp;&amp; 1 &nbsp;&nbsp;BPM . </font></li></ul><ul style="margin-top: 0pt; margin-bottom: 0pt;"><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: 6px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">Individual Foetal parameters as on scans &amp; correspond to mean gestational age </font></li></ul><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">Of &nbsp;&nbsp;&nbsp;Wks &nbsp;&nbsp;Ds &nbsp;&amp; &nbsp;&nbsp;&nbsp;Wks &amp; &nbsp;&nbsp;Ds with &nbsp;mean derived LMP: &nbsp;&nbsp;&amp; EDD: &nbsp;</font><ul style="margin-top: 0pt; margin-bottom: 0pt;"><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: 6px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">No gross ultrasonologically detectable cranio-spinal or abdominal &nbsp;anomaly noted at this stage in both the foetii.*</font></li><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: 6px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">Placenta fused: Position: &nbsp;Anterior Grade B &nbsp;with no low extension.</font></li><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: 6px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">Liquor quantity appears &nbsp;&nbsp;adequate in both the sacs.</font></li><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: 6px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Cervical length is: </font><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">. &nbsp;(Normal 3.0 cms +).</font></li><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: 6px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">No gross adnexeal pathology demonstrated.</font></li></ul><br><p dir="ltr" style="line-height: 1; margin-top: 0pt; margin-bottom: 0pt; margin-left: 90pt; text-indent: -90pt;"><br></p><font face="Questrial" size="3" style="background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">Impression : Biamniotic, Bichorionic Concordant Twin IU Live Pregnancies of approx. &nbsp;Wk &amp; &nbsp;&nbsp;Ds (</font><font face="Questrial" size="3" style="background-color: transparent; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">+</font><font face="Questrial" size="3" style="background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"> 2Wk). Estimated Ft.Wts. &nbsp;1 &nbsp;&amp; 1 &nbsp;gms ( </font><font face="Questrial" size="3" style="background-color: transparent; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">+</font><font face="Questrial" size="3" style="background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"> 15 %).</font>&nbsp;<font face="Questrial" size="3" style="background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Disparity from KLMP: &nbsp;&nbsp;Ds larger &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><p dir="ltr" style="line-height: 1; margin-top: 0pt; margin-bottom: 0pt;"><br></p><ul style="margin-top: 0pt; margin-bottom: 0pt;"><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: -24px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">Not all foetal structural anomalies manifest or &nbsp;addressed on T2 U.S. Foetal &nbsp;&nbsp;&nbsp;biometry &amp; Estimated Foetal Wt. subject to statistical variation &amp; morphometry to technical limits</font><font face="Questrial" style="background-color: transparent; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">.</font></li><li dir="ltr" style="list-style-type: disc; font-size: 13px; background-color: transparent; vertical-align: baseline; margin-left: -24px;"><font face="Questrial" style="font-size: 15px; background-color: transparent; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">Level II U</font><font face="Questrial" style="background-color: transparent; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">.S &amp; Fetal Echo. indicated at &nbsp;20 Wks + &nbsp;in pregnancies at risk for foetal malformations.</font></li></ul><font face="Questrial" style="font-size: 15px; background-color: transparent; font-style: italic; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">End Of report ( Films -2)</font>&nbsp;<font face="Questrial" style="font-size: 15px; background-color: transparent; font-style: italic; vertical-align: baseline; white-space: pre-wrap;">Thanks for the courtesy of referral.</font><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;"> &nbsp;&nbsp;&nbsp;</font><div><font face="Questrial" style="font-size: 15px; background-color: transparent; vertical-align: baseline; white-space: pre-wrap;">&nbsp;</font></div><br><br><br><br><p></p><p></p>
        </div>
    </div

最佳答案

您可以将整个 html 加载到隐藏的 div 或 dom 中的其他元素中,例如使用 id 容器,然后使用 children().each() 循环在所有一级 div 上应用任何 css 或其他技巧。

var pagearray = []
$('#container').children('div').each(function () {
     //'this' is a div object which you can use
     pagearray.push( $(this).html() );
});
//show first page
$("#page").html(pagearray[0]);

关于javascript - 如何将较长的html文本拆分为具有特定高度的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34217898/

相关文章:

javascript - WebRTC鼠标指针

javascript - 如何使用node.js按指定顺序收集URL内容

javascript - 将 URL 作为发布数据传递时,jQuery ajax 返回 404 错误

html - 使用 rowspans 设置表格的高度和宽度...行不通

javascript - 如何使用get发送数据而不在url中显示参数?

javascript - 如何使用 Google Calendar API 检索每月重复事件的实例?

javascript - 如何将此 JSON 响应放入下拉列表中

javascript - 退出 jQuery $.each 循环

java - 使用 spring mvc ModelAttribute 将元素绑定(bind)到列表

javascript - Chart.JS 如何更改 y 轴的顺序