Everything in col-6 is a string from data, including the tag. This is from a rich text input field.
I’m using Bootstrap 4.
I want to make if the element is over 200px, the rest of the element (or text if possible) is going to the next column.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
<div class="container" style="height:200px;">
<div class="row">
<div class="col-6">
<p></p>
<p style="margin-bottom: 0px;">
<strong>ARTICLE 1 - Lorem.</strong>
</p>
<p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Facilis iste nesciunt
eveniet debitis cumque id nemo exercitationem libero temporibus vero, iusto doloremque
quas,
modi distinctio sed provident ipsam sunt expedita eligendi quibusdam possimus optio.
Facere ipsa laborum commodi similique culpa voluptate ipsam esse rem tempore a quas
nostrum animi, quos consequuntur temporibus expedita error molestias voluptatibus
dolorem omnis optio consequatur atque molestiae! Quia molestiae soluta placeat ex
voluptas minima laboriosam numquam fugiat ducimus perferendis? Alias, modi. Libero
laboriosam consectetur aliquid atque facilis ipsa, magni quo quod totam optio sed
inventore illum, vero ipsam voluptates nemo eius, dignissimos molestiae! Quibusdam,
vero.</p>
<p style="margin-bottom: 0px;">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Facilis voluptatem fuga beatae in iure harum commodi doloribus vero
atque officia?</p>
<p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat, illum.</p>
<p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quia assumenda dignissimos eos at quam reprehenderit dicta. Ad ratione
aliquam et perferendis neque quisquam nulla, ipsam sunt, pariatur id magnam nisi quaerat
non, assumenda aut? Ex fuga dignissimos aliquid, voluptatum id harum quo sit velit enim
voluptatibus minima tempore sequi, explicabo quaerat ipsam quisquam facilis placeat
molestias quia reprehenderit nisi fugit:</p>
<ul style="margin-bottom: 0px;">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, maiores?</li>
</ul>
<p style="margin-bottom: 0px;">
</p>
<p style="margin-bottom: 0px;">
<strong>ARTICLE 2 - Lorem, ipsum.</strong>
</p>
<p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quo atque tempora doloremque earum sit beatae, fuga alias, maiores
vero nobis quibusdam tempore porro eveniet voluptatibus quod libero! Vero voluptates
aperiam soluta. Debitis nesciunt quia quis non corrupti culpa quo commodi, similique,
eos excepturi velit consectetur sequi. Ratione doloremque nostrum unde ad dicta quos
rerum asperiores provident sequi nam odit iure, facere eos aperiam, recusandae atque,
nesciunt ullam voluptatibus placeat aliquid.
</p>
</div>
<div class="col-6"></div>
</div>
</div>
Expected result
The goal is to make this render as PDF with wkhtmltopdf. But I want to achieve this in CSS first. If you can also give the supported style for wkhtmltopdf, that would be great. If you can only provide the css or bootstrap class, I will handle the rest.
the closest result is from This solution
Result of the closest solution
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
<style class="">
.description-condition {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
</style>
<div class="container description-condition" style="height:200px;">
<p></p>
<p style="margin-bottom: 0px;">
<strong>ARTICLE 1 - Lorem.</strong>
</p>
<p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Facilis iste nesciunt
eveniet debitis cumque id nemo exercitationem libero temporibus vero, iusto doloremque
quas,
modi distinctio sed provident ipsam sunt expedita eligendi quibusdam possimus optio.
Facere ipsa laborum commodi similique culpa voluptate ipsam esse rem tempore a quas
nostrum animi, quos consequuntur temporibus expedita error molestias voluptatibus
dolorem omnis optio consequatur atque molestiae! Quia molestiae soluta placeat ex
voluptas minima laboriosam numquam fugiat ducimus perferendis? Alias, modi. Libero
laboriosam consectetur aliquid atque facilis ipsa, magni quo quod totam optio sed
inventore illum, vero ipsam voluptates nemo eius, dignissimos molestiae! Quibusdam,
vero.</p>
<p style="margin-bottom: 0px;">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Facilis voluptatem fuga beatae in iure harum commodi doloribus vero
atque officia?</p>
<p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat, illum.</p>
<p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quia assumenda dignissimos eos at quam reprehenderit dicta. Ad ratione
aliquam et perferendis neque quisquam nulla, ipsam sunt, pariatur id magnam nisi quaerat
non, assumenda aut? Ex fuga dignissimos aliquid, voluptatum id harum quo sit velit enim
voluptatibus minima tempore sequi, explicabo quaerat ipsam quisquam facilis placeat
molestias quia reprehenderit nisi fugit:</p>
<ul style="margin-bottom: 0px;">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, maiores?</li>
</ul>
<p style="margin-bottom: 0px;">
</p>
<p style="margin-bottom: 0px;">
<strong>ARTICLE 2 - Lorem, ipsum.</strong>
</p>
<p style="margin-bottom: 0px;">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quo atque tempora doloremque earum sit beatae, fuga alias, maiores
vero nobis quibusdam tempore porro eveniet voluptatibus quod libero! Vero voluptates
aperiam soluta. Debitis nesciunt quia quis non corrupti culpa quo commodi, similique,
eos excepturi velit consectetur sequi. Ratione doloremque nostrum unde ad dicta quos
rerum asperiores provident sequi nam odit iure, facere eos aperiam, recusandae atque,
nesciunt ullam voluptatibus placeat aliquid.
</p>
</div>
New contributor
adit mark is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.