javascript - 如何使用 CSS 或 Javascript 将 API 中的长段落分成 3 部分

问题描述

目前，我正在尝试从 API 将长段落或新闻分成 3 个部分，以便它可以采用示例图片中的布局。但问题是我不能分割段落以使其像一个布局，除非我为每个部分获得 3 个属性并且只是以角度阅读它。

但它仍然不能解决我的问题，有人可以帮助我只使用 1 个属性来解决这个问题吗？

这是我的新闻示例数据：


    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 部分

标签： javascripthtmlcssangularangular7

javascript - 如何使用 CSS 或 Javascript 将 API 中的长段落分成 3 部分

问题描述

解决方案

推荐阅读