javascripthtmlcsssasscss-multicolumn-layout

How to split into new column via multi-column layout only when text is overflowing

I'm looking for a way to dynamically break a continuous text into multiple columns only if the content of the first column is overflowing. It should be responsive and work for any device width. The solution can be (S)css or JavaScript.

I already tried using column-count like suggested here but this always creates multiple columns no matter if there is still enough space in the first column.

This is what I am looking for visually

This is about what I want to achieve just without the mentioned column-count 

.content {
  height: 90vh;
}

.text {
  width: 300px;
  column-count: 2;
}
 <div class="content">
   <div class="text">
      Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
   </div>
 </div>

Solution

  • You need to set height to .text so it would know when to move to the next column:

    .content {
  height: 90vh;
}

.text {
  height:100%;
  width: 300px;
  column-count: 1;
}
    <div class="content">
   <div class="text">
      Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
   </div>
 </div>