通过两个引导列平均拆分文本

时间:2018-04-04 20:54:30

标签: twitter-bootstrap multiple-columns

我使用bootstrap并决定将文本拆分为大中型屏幕上的两个等长列(col-md-6),并将其保存在小型和xsmall屏幕上的一列中。这是一个简单的任务,但我希望此文本在两个上平均分割,因此两列包含相似数量的文本。显然我不想拆分单词。句子可以被打破。

所以我想要这个文字:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium id libero sit amet finibus. Aenean tempus vestibulum condimentum. Nam at condimentum ex, id pulvinar est. Nulla et congue augue. Praesent feugiat consequat lectus, et gravida est volutpat at. Nunc elit ligula, luctus ut ipsum non, facilisis faucibus ligula. Donec lectus leo, semper et vestibulum eget, semper non arcu. In efficitur pharetra porta. Praesent malesuada risus eu ipsum dapibus, nec ultrices dui auctor. Nunc eleifend tempus urna non accumsan. Aliquam turpis quam, ultricies ut turpis ut, porttitor porta lacus. Maecenas sit amet risus in eros aliquam consequat. Nullam quis quam lectus. Morbi sed neque vel orci commodo luctus eget ut velit. Proin iaculis mauris ut cursus egestas.

通过两列自动拆分(仅在bootstrap的xl和lg屏幕上),所以它看起来像这样:

visual presentation

拆分后的

代码:

            <div class="row">
                <div class="col-md-6">
                    <p class="text-left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium id libero sit amet finibus. Aenean tempus vestibulum condimentum. Nam at condimentum ex, id pulvinar est. Nulla et congue augue. Praesent feugiat consequat lectus, et gravida est volutpat at. Nunc elit ligula, luctus ut ipsum non, facilisis faucibus ligula. Donec lectus leo, semper et vestibulum eget, semper non arcu. In efficitur pharetra porta. Praesent
        </p>
                </div>
                <div class="col-md-6">
                    <p class="text-left">
        malesuada risus eu ipsum dapibus, nec ultrices dui auctor. Nunc eleifend tempus urna non accumsan. Aliquam turpis quam, ultricies ut turpis ut, porttitor porta lacus. Maecenas sit amet risus in eros aliquam consequat. Nullam quis quam lectus. Morbi sed neque vel orci commodo luctus eget ut velit. Proin iaculis mauris ut cursus egestas.
        </p>
                </div>
            </div>

上面的示例显示了手动复制分割,但根据长度我希望它自动分割为一半或接近一半(第二列不能长于第一列)。

我相信有一种方法可以使用javascript来做到这一点?在小屏幕和超小屏幕上没有分割 - 只有一列。

请注意,我需要平均分割文字,而不是平均分割段落。有人认为我的问题是重复的,但另一个问题根本没有解决我的问题。如果您在第一段中添加一些文字,则第二列很可能比第一列长,因为它会通过段落分割文本

谢谢

0 个答案:

没有答案