Automatically splitting text content into even columns

Question

Can\'t find any documentation to see if anyone\'s already done this. I imagine it\'s possible through javascript or PHP. I\'ll explain what I\'m trying to accomplish as so:<

Answer 1

This is a lot simpler than you're making it.

You can include multiple col classes in to be handled when the screen size changes. Simply include the ones for each screen size and bootstrap will handle the rest.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">
  <p class="col-lg-12 col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis,
    id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
  </p>
  <p class="col-lg-12 col-md-6">Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque
    dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus
    urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien
    tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
  </p>
  <p class="col-lg-12 col-md-6">Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae
    orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed
    erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
  </p>
  <p class="col-lg-12 col-md-6">Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis
    sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
  </p>
  <p class="col-lg-12 col-md-6">Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin
    molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque
    purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
  </p>
  <p class="col-lg-12 col-md-6">Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse
    purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
</div>
</div>

Answer 2

I think using column-width on CSS multi-columns is the way to go if you want it to be responsive and split the paragraphs into columns.

.row {
  column-width: 400px;
  column-gap: 10px;
}

p {
  padding: 10px;
  width: 100%; 
}

Demo: https://www.codeply.com/go/UvsUTQDVcC

EDIT - the only way to avoid breaking paragraphs is using break-inside: avoid;, but then it diminishes the even height.

p {
 padding: 10px;
 width: 100%; 
 break-inside: avoid;
}

Alternately, column-count:.. could be used an then define a @media query for each breakpoint/width.

Answer 3

My (admittedly weak) understanding of bootstrap tells me that class="col-lg-12 col-md-6" would make the width of the div containing the paragraphs 12 grid-units wide at "large" screen widths, and 6 units at "medium" screen widths — but it would not affect the number of columns of each paragraph ... the whole div would just be narrower.

Within that div, aside from bootstrap, you can do multiple columns with plain CSS using the columns or column-count property, as seen here:

div.row .multicol {
    column-count: 2;
}

<div class="row">
    <div class="col-12 multicol">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque
        nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus
        nibh nisi, eget lobortis nisl efficitur eget. Fusce nec
        tincidunt felis, id tempor arcu. Interdum et malesuada fames
        ac ante ipsum primis in faucibus. Donec quis feugiat diam.
        Morbi diam nisl, iaculis in elit eget, venenatis consectetur
        augue.</p>

        <p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu
        lacinia purus, quis facilisis massa erat a sapien. Phasellus
        mollis accumsan erat vel pharetra. Nulla semper cursus neque,
        nec pretium quam porta id. Duis pretium non diam sit amet
        rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt
        ligula condimentum. Sed id risus vitae lectus condimentum
        eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus,
        diam dui lobortis ex, a scelerisque leo ligula porttitor
        velit. Duis ultricies risus urna, quis interdum tellus
        lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt
        id, pellentesque id nunc. Ut ultrices quam at lorem feugiat,
        eget laoreet sem auctor. In augue dolor, porta eget nulla sed,
        mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu
        at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a
        diam aliquam, vitae ultricies dui vulputate. Nulla id urna
        enim. Quisque varius neque vitae egestas hendrerit.</p>

        <p>Duis vitae imperdiet quam. Vestibulum congue finibus velit
        nec sagittis. Integer vel ex nulla. Nunc in urna dignissim,
        ullamcorper enim in, lobortis ligula. Vivamus tellus ligula,
        feugiat at diam ac, luctus vestibulum tortor. Cras congue
        magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula
        auctor elementum. Fusce vulputate ante ut luctus fermentum.
        Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu,
        sit amet scelerisque tortor leo vel ligula. Praesent sem leo,
        volutpat sed erat vitae, consectetur maximus nibh. Ut at
        facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget,
        semper commodo libero. Aliquam metus tellus, facilisis ut
        posuere vel, lacinia id ex.</p>

        <p>Cras quis eros eleifend lorem tempus sodales. Sed semper
        sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel
        elit id sodales. Phasellus non lorem dolor. Ut viverra diam
        sed lacus tincidunt, vel lobortis sapien sodales. Praesent
        ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec
        a libero vestibulum, dictum orci quis, scelerisque orci.
        Maecenas volutpat ex eu ex fermentum interdum.</p>

        <p>Cras ut elit risus. Sed semper mi mauris, vel bibendum
        augue pharetra efficitur. Vestibulum finibus elit sit amet
        velit blandit convallis et dignissim nisi. Etiam nec quam
        odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur
        ornare. Proin molestie purus sit amet lacinia hendrerit. Sed
        in elit mauris. Donec pretium sapien libero. Aliquam sed
        tempus lorem. Cras maximus eu urna vitae ultricies. Orci
        varius natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Quisque purus lorem, condimentum at
        eros vitae, sagittis vestibulum elit. Sed placerat sapien
        urna, eget suscipit massa pharetra in. Nulla efficitur ac
        ipsum non varius.</p>

        <p>Donec quis consequat leo, in aliquet neque. Integer gravida
        faucibus diam id eleifend. Aenean at dolor nec ante aliquet
        consectetur. Nullam ullamcorper neque facilisis, faucibus nisl
        nec, volutpat elit. Fusce facilisis quis nisl sed lobortis.
        Suspendisse purus tellus, vulputate a tortor eu, pellentesque
        bibendum odio. Fusce nisl nisl, maximus non hendrerit non,
        accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et,
        pellentesque lobortis orci.</p>
    </div>
</div>

You could then have several @media rules with various min-width, max-width, along with orientation, aspect-ratio etc., whatever fits your needs, to get different numbers of columns in different situations.

---

(note I also added closing </p> tags to the paragraphs, which you should definitely do. Don't allow the browser to infer them. Sending invalid markup to the browser throws it (them) into "quirks mode" and all bets about how the browser is going to interpret it are off, so the structure of the DOM becomes unpredictable. All element selection whether from CSS or javascript (or bootstrap) is based on the structure of the DOM, not on the markup text itself.)

Answer 4

You could use, like, math or somethin'.

$(()=>{
  $(".splitme").each(function(){
    var lens = [];
    $(this).find("p").each(function(){lens.push($(this).text().length)});
    var target_col_len = lens.reduce((a,i)=>a+i,0)/2;
    var col_a = [], col_b = [], n = 0;
    for(var i=0; i<lens.length; i++){
      if(n+lens[i]<=target_col_len || Math.abs(n+lens[i]-target_col_len)<Math.abs(n-target_col_len)) col_a.push(i);
      else col_b.push(i);
      n+=lens[i];
    }
    var $c = $(this).clone();
    var $col_a = $('<div class="col-6">'), $col_b = $('<div class="col-6">');
    for(var i=0; i<col_a.length; i++) $col_a.append($c.find("p:eq("+i+")"));
    for(var i=0; i<col_b.length; i++) $col_b.append($c.find("p:eq("+i+")"));
    $(this).parent().empty().append($col_a).append($col_b);   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-12 splitme">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis, id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
        <p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
        <p>Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
        <p>Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
        <p>Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
        <p>Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
    </div>
</div>

Edit.. The other guy's answer is much less stupid.. I'm upvoting him, you should too..