Разбиение абзацев на разные деления - PullRequest
Новая
       14

Разбиение абзацев на разные деления

1 голос
/ 26 марта 2019

Я получаю абзацы из базы данных в виде массивов, например 

<?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 как газету, и на странице нет прокрутки, если есть лишний текстэто должно быть на второй странице.

, например, это должно быть преобразовано в эту 

<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>

Проблема, с которой я столкнулся, заключается в том, что я не могу понять, как узнать, когда разделить наНа второй странице я попытался сосчитать слова или абзацы, но я не думаю, что это хорошее решение.

Любая помощь, пожалуйста

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

Вам нужно разделить каждое слово на один элемент, чтобы вычислить ширину и высоту, чтобы поместиться в контейнер.Пожалуйста, смотрите комментарии в кодах для объяснения.

Демо здесь: 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>
0 голосов
/ 26 марта 2019

Вы пробовали экранирование строки так, что когда код встречает определенный символ (например, точку остановки), он заканчивает абзац и создает новый. 

preg_replace('/\./', '/</p><p>', $data);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...