В настоящее время я пытаюсь получить длинный абзац или новости из 3 разделов из API, чтобы он мог иметь макет, как в примере изображения. но проблема в том, что я не могу разделить абзац, чтобы сделать его похожим на макет, если я не получил 3 атрибута для каждого раздела и просто прочитал его в угловом формате.
Я уже читал это Разделить HTML на страницы, разбить длинные абзацы
но это все еще не решает мою проблему, может кто-нибудь помочь мне решить эту проблему, используя только один атрибут?
это мой пример данных для новостей:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.
это мой HTML-код:
<!-- start section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-4 pl-0 text-center text-large md-no-padding-lr md-margin-30px-bottom">
<!-- start blockquote -->
<p class="text-extra-dark-gray margin-50px-bottom md-margin-20px-bottom alt-font">
<i class="fas fa-quote-left text-light-gray icon-medium margin-15px-bottom"></i>
Apa yang mendefinisikan siapa kita, tidak ada artinya dibandingkan apa yang menyatukan kita.
<i class="fas fa-quote-right text-right text-light-gray icon-medium margin-15px-bottom"></i>
</p>
<!-- end blockquote -->
</div>
<div class="col-12 col-lg-8 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga autem eius, hic tempore neque vel beatae facilis quaerat excepturi, minima odio dolore! Atque non quo illo, odio est vel consequuntur! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quis ex aspernatur ab sunt repellat in ratione. Suscipit fugiat, sed laborum debitis, soluta dolores ipsum hic quae, corporis dignissimos unde! Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus impedit repudiandae illum, incidunt tenetur sapiente ad itaque odio, ipsa cupiditate saepe omnis voluptatibus! Ipsum beatae, nihil voluptatem earum illum non. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium sunt aliquam corrupti sed voluptates, suscipit quibusdam rerum inventore molestiae, ullam fugiat ducimus, debitis mollitia consequatur. Maiores, cupiditate! Nesciunt, odio modi.</p>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- start parallax section -->
<section class="wow fadeIn parallax p-0 height-400px md-height-200px sm-height-100px background-position-x-50 cover-background" data-stellar-background-ratio="0.5" style="background-image: url('../../../assets/img/galeri/mpkmb-6.webp');">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</section>
<!-- end parallax section -->
<!-- start section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-5 pl-0 text-large md-no-padding-lr md-margin-30px-bottom">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, ab minima! Aliquid unde architecto, omnis, quisquam, rem exercitationem fuga reiciendis quam voluptatibus aliquam minima aperiam dolore voluptatem sunt alias quis.</p>
</div>
<div class="col-12 col-lg-7 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum placeat officiis laborum. Amet harum placeat, eos, mollitia laudantium odio, quam rerum ut esse provident explicabo asperiores in possimus molestiae officia.</p>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
Итак, чтобы подвести итог:
- как я могу составить предложение, которое может перейти к следующему разделу, как макет или пример изображения?
- Что касается моего кода, то он уже разделил изображение макета, но все еще не разделил или заставил новости перейти к следующему разделу, поскольку в моем коде я делю его на 3 раздела
