如何使用 jQuery 将文本分割成块

Posted 2023-02-26

【中文标题】如何使用 jQuery 将文本分割成块

【英文标题】：How to split text into chunks with jQuery

【发布时间】：2011-02-08 10:13:48

【问题描述】：

我正在尝试将一大段文本分成相等的部分，以便我可以为文本制作一个寻呼机插件。我希望能够将插件应用于容器 div，而不必像在其他一些寻呼机插件中那样指定子级；因此它可以与 Wordpress 等 CMS 一起使用。

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

到目前为止，我发现的所有插件都使用子节点，因此例如拆分内容。

<div class="container">
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

如果我为容器设置了溢出：隐藏应用 CSS 的高度，由于内容是内联的，我很难找到分割点。

理想情况下，我希望将文本分割成块，然后在文本区域下方创建一个寻呼机导航 - 这一切都是因为客户端不喜欢滚动（是的，我们仍处于 2011 年的那个阶段）。

任何有关如何解决此问题的帮助将不胜感激。

我是否以最好的方式处理这个问题，希望拆分内容？该容器中必须有简单的标记，因此我可以从 Wordpress 添加 the_content()。

【问题讨论】：

你的意思是wordwrap 吗？

【参考方案1】：

查看Columnizer Plugin 源并根据您的需要进行调整。

【讨论】：

很好地调用了分栏器。我可以将它拆分到一个容器中，然后滚动或分页。非常感谢！