将段落拆分为不同的 div答案

【问题标题】：Splitting paragraphs into different divs将段落拆分为不同的 div
【发布时间】：2019-08-16 10:44:24
【问题描述】：

例如，我从数据库中获取段落作为数组

<?php $data = [
     "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
     "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
     "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham."
  ];?>

我正在使用 css 和 html 作为报纸将段落打印到列中，并且页面中没有滚动，如果有额外的文本，它应该在第二页中。

所以例如 this 应该被渲染到 this 中

<div id="page-1">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="page-2">
    <p>de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>

我遇到的问题是我不知道如何知道何时拆分到第二页，我试图计算单词或段落，但我认为这不是一个好的解决方案。

请帮忙

【问题讨论】：

如果每个数组值都被视为像您的示例一样的列，我可能会 array_chunk() 拆分值为 2，然后循环块。
您不能使用 PHP 执行此操作，因为 PHP 在服务器上运行，并且不知道一页可以容纳多少信息（我假设这取决于客户端浏览器的大小等等？ )

标签： php jquery flexbox

【解决方案1】：

您需要将每个单词分成单个元素来计算宽度和高度以适合容器。解释请看代码中的cmets。

这里的演示： https://paiza.io/projects/e/E5YUotJG0ilsaH8ZI-bH1g?theme=twilight

完整代码：

<?php
$data = array(
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from 'de Finibus Bonorum et Malorum' by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham."
    );
// add newline indicators
$str = implode("{{nl}} ", $data);
// separate all spaces into divs
$str = "<div class='ib txt'>". str_replace(" ", "</div><div class='ib txt'>", $str) ."</div>";
// add additional indicator for end characters of paragraph
$str = preg_replace("/<div class='ib txt'>([^<]*)\{\{nl\}\}<\/div>/", "<div class='ib txt greedwidth'>$1</div>", $str);
?>

<html>
<head>
    <style>
        #container {
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .txt {
            /*border: 1px solid #ccc;*/ /* uncomment to show guidelines */ 
            padding: 5px 10px;
        }
        .ib {
            display: inline-block;
        }
        #all_content {
            display: block; 
            visibility: hidden; 
            position:absolute;
        }
    </style>
</head>

<body>
    <div id="all_content"><?=$str;?></div>
    <div id="container"></div>
    <div>
        <button id="back_page" onclick="show_page(0)"> << </button>
        <button id="next_page" onclick="show_page(0)"> >> </button>
    </div>


    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        var elements = [];

        $(document).ready(function() {
            var page_width_limit = $('#container').innerWidth();
            // fix height based on first div - given all texts have same height
            var page_height_limit = Math.floor($('#container').innerHeight()/$('#all_content div.txt:first').outerHeight()) * $('#all_content div.txt:first').outerHeight();
            var page_limit = page_width_limit * page_height_limit;

            var cur_dimension = 0;
            var width_padding = 0;

            $('#all_content div').each(function() {

                // padding width
                width_padding += $(this).outerWidth();
                let additional_width = 0;
                if (width_padding > page_width_limit) {
                    additional_width = page_width_limit - (width_padding - $(this).outerWidth());
                    width_padding = $(this).outerWidth();
                }

                // greedy width
                if ($(this).hasClass('greedwidth')) {
                    let _tmp_orig_width = $(this).outerWidth();
                    $(this).outerWidth(page_width_limit - (width_padding - $(this).outerWidth())-1);
                    width_padding += ($(this).outerWidth() - _tmp_orig_width);
                }

                // store elements on their respective page
                cur_dimension += ($(this).outerWidth() + additional_width) * $(this).outerHeight();
                let index = Math.floor(cur_dimension/page_limit);
                if (typeof elements[index] === 'undefined') {
                    elements[index] = [];
                } 
                elements[index].push(this);
            });

            // show first page
            show_page(0);
        });

        function show_page(page) {
            if (typeof elements[page] === 'undefined') 
                return false;

            // navigator
            $("#back_page").attr('onclick', "show_page("+ (page-1) +")");
            $("#next_page").attr('onclick', "show_page("+ (page+1) +")");

            // display page
            $('#container').html("");
            for (var elem of elements[page]) {
                $('#container').append(elem);
            }

            return true;
        }
    </script>
</body>
</html>

【讨论】：

【解决方案2】：

您是否尝试过字符串转义，这样当代码遇到特定字符（例如句号）时，它会结束段落并创建一个新段落。

preg_replace('/\./', '/</p><p>', $data);

【讨论】：