例如，我从数据库中获取段落作为数组
<?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>
我遇到的问题是我无法弄清楚如何知道何时拆分到第二页，我试图对单词或段落进行计数，但是我认为这不是一个很好的解决方案。
请帮助
答案 0 :(得分：0)
您是否尝试过字符串转义，以便当代码遇到特定字符（例如句号）时，它结束该段落并创建一个新的段落。
preg_replace('/\./', '/</p><p>', $data);
答案 1 :(得分：0)
您需要将每个单词分成单个元素以计算宽度和高度以适合容器。请查看代码中的注释以获取解释。
演示在这里： 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>