如何把一些固定长度的HTML代码的其他一些网页上我的网页div.
我使用的是后端api,它会返回所有帖子的完整HTML内容.
在我的页面上,我只想显示标题和该网页实际文本的前3行.
我应该使用什么HTML标记?
<div class="posts">
<div class="post">
<h2>apiresponse.posts.post.title</h2> <!--psuedo code-->
<div class="postSample">
<!--psuedo code--> 30charactersfrom(apiresponse.posts.post.content)
put first 30 character of readable content of the postfollowd by ...
see below content to when what response I get back from api
<div>
</div>
<!--many such repeated divs based upon api response-->
<div>
从API返回的帖子内容带有标记和内容.但我想从这个回复中获取前30或40个真实内容,并显示在UI上.
"content": "<p><span style=\"color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 20px; letter-spacing: -0.003em;\">This is line ione in my post. This is line two from the post.</span></p><p><br /></p><p><img alt=\"\" class=\"cf td te\" height=\"467\" role=\"presentation\" src=\"https://miro.medium.com/max/1400/0*zTHDVE-0s8Wyajw7\" style=\"box-sizing: inherit; height: auto; max-width: 100%; vertical-align: middle; width: 692px;\" width=\"700\" /> <span style=\"color: #757575; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\">Photo by </span><a class=\"au mu\" href=\"https://somephotolink.com/al\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Manvendra</a><span style=\"color: #757575; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\"> on </span><a class=\"au mu\" href=\"https://unsplash.com/?utm_source=medium&utm_medium=referral\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Unsplash</a></p><div class=\"pk pl pm pn po l\" style=\"box-sizing: inherit; margin-bottom: 40px;\"><div class=\"o eb\" style=\"box-sizing: inherit; display: flex; justify-content: center;\"><div class=\"eq cf gt gu gv gw gx gy gz ha hb\" style=\"box-sizing: inherit; margin: 0px 32px; max-width: 692px; min-width: 0px; width: 692px;\"><article style=\"box-sizing: inherit;\"><div class=\"l\" style=\"box-sizing: inherit;\"><div class=\"l\" style=\"box-sizing: inherit;\"><section style=\"box-sizing: inherit;\"><div style=\"box-sizing: inherit;\"><div class=\"kt of qy qz ra\" style=\"box-sizing: inherit; word-break: break-word; word-wrap: break-word;\"><p class=\"pw-post-body-paragraph ry rz rc sa b sb sc hr sd se sf hv sg kc sh si sj sk sl sm sn so sp sq sr ss kt dr\" data-selectable-paragraph=\"\" id=\"5abb\" style=\"box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 20px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;\">This is line 3 from the post .This is line 4 from the post . This is line 5 from the post . This is line 3 from the post .xxxxxxxxx. xxxxxxxxxxx.xxxxxxxxxxx.</p></div><div class=\"o eb jm fp nz ti\" role=\"separator\" style=\"box-sizing: inherit; display: flex; justify-content: center; margin-bottom: 14px; margin-top: 32px; padding-bottom: 10px; padding-top: 24px;\"><span class=\"tj mc cj tk tl fe\" style=\"background-color: #080808; border-radius: 50%; box-sizing: inherit; display: inline-block; height: 3px; margin-right: 20px; width: 3px;\"></span><span class=\"tj mc cj tk tl fe\" style=\"background-color: #080808; border-radius: 50%; box-sizing: inherit; display: inline-block; height: 3px; margin-right: 20px; width: 3px;\"></span><span class=\"tj mc cj tk tl\" style=\"background-color: #080808; border-radius: 50%; box-sizing: inherit; display: inline-block; height: 3px; width: 3px;\"></span></div><div class=\"kt of qy qz ra\" style=\"box-sizing: inherit; word-break: break-word; word-wrap: break-word;\"><h1 class=\"tm tn rc oo ds to tp tq ht ka tr kb hx ts tt tu ib ke tv kf if kg tw kh ij tx dr\" data-selectable-paragraph=\"\" id=\"6896\" style=\"box-sizing: inherit; color: #292929; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 22px; letter-spacing: 0px; line-height: 28px; margin: 2.05em 0px -0.37em;\">History</h1><h2 class=\"ty tn rc oo ds jy tz jz ht ua ub uc hx kc ud kd ib sk ue uf if so ug uh ij ui dr\”