javascript – 自动将文本内容拆分为偶数列

找不到任何文件,看看是否有人已经这样做了.我想通过javascript或PHP可以实现.我将解释我正在努力实现的目标：

假设我正在使用Twitter Bootstrap 4.

说我在HTML中有以下内容：

<div class="row">
    <div class="col-12">
        <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>

但是,当屏幕大于> 768px时,我想自动将上面的内容分成两半并显示为如此.

<div class="row">
    <div class="col-md-6">
        <!-- Half the content -->
    </div>
    <div class="col-md-6">
        <!-- Second half of content -->
    </div>
</div>

就内容而言：

>假设长度可能会有变化
>假设段落数量可能会有变化

还必须维护一些规则.

>内容不能仅在段落末尾拆分
>拆分必须根据段落高度完成,而不是基于段落长度
>列必须尽可能接近相等的高度

可以做到,实现它的最佳方法是什么？

关于我个人的偏好,如果我能用PHP实现这个,那将是最理想的,第二选择是jQuery.

解决方法:

我认为如果你希望它具有响应性,那么在CSS多列上使用列宽是可行的.

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

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

演示：https://www.codeply.com/go/UvsUTQDVcC

编辑 – 避免破坏段落的唯一方法是使用break-inside：avoid;,但随后它会降低均匀高度.

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

或者,可以使用列计数：..然后为每个断点/宽度定义@media查询.

标签：javascript,php,bootstrap-4,responsive
来源： https://codeday.me/bug/20190731/1587868.html