HTML/CSS在单独的块中证明文本的合理性

从任何一本书或文章中选取任何一页，并尝试制作一个精确的在线副本（与HTML/CSS具有相同的外观），这包括使用精确的换行符对文本进行验证，并将外包装的宽度设置为与文本本身的最小/最大宽度相匹配——这是可能的吗

HTML可以是这样的：

...
<div class="page-wrapper">
<span class="line">The Republic of Plato is the longest of his works with the exception of the Laws,</span>
<span class="line">and is certainly the greatest of them. There are nearer approaches to modern</span>
<span class="line">metaphysics in the Philebus and in the Sophist; the Politicus or Statesman is</span>
<span class="line">more ideal; the form and institutions of the State are more clearly drawn out</span>
</div>
...

注2:

---

我更喜欢纯HTML/CSS解决方案，如果不可能的话，让我们把JS放在桌子上…

你可以在必要的地方使用

段落和

中断标记

CSS也不会很复杂

p {
   text-align: justify;
}

虽然我不一定确定

你要什么

为什么它必须是源代码的精确副本，因为web是相当动态的

C） 一个案例一个案例的评估是没有好处的，因为它在桌面上可能是完美的，但在移动设备上却达不到a）或B），反之亦然

.page-wrapper {
    text-align: justify;
    width: 500px;
}

.line:after {
    content: "";
    display: inline-block;
    width: 100%;
}

鉴于您在不同的尺寸上也存在问题，@media查询可能会有很大帮助

@media only screen and (max-width: 600px) {
    // DO SOMETHING HERE IF SCREEN IS SMALLER THAN 600px
}

您还可以有两个不同的div，并在必要时隐藏其中一个，然后显示另一个

div.mobile {
    display: block;
}
div.desktop {
    display: none;
}
@media only screen and (max-width: 600px) {
    div.desktop {
        display: block;
    }
    div.mobile{
        display: none;
    }
}

又快又脏的方法：

计算出你的最大字符长度。使用单间距字体。使用
ch
单位和最大字符数设置包装宽度，例如
82ch
。接下来设置一个最大宽度为100vw且溢出：自动的容器，以便内容可以滚动


.page容器{
最大宽度：100vw；
溢出：自动；
}
.页面包装器{
文本对齐：对齐；
宽度：82厘米；
背景色：#EEE；
字体系列：信使；
字体大小：15px；
}
.台词：之后{
内容：“；
显示：内联块；
宽度：100%；
}


《柏拉图的共和国》是他著作中最长的一部，除了《法律》之外，
当然是其中最伟大的。有更接近现代的方法
费勒布和智者的形而上学；政治家或政治家是
更理想；国家的形式和机构更加明确

不要这样做。印刷和网络是两种截然不同的媒介。打印您可以获得像素级的完美效果，并且您可以处理固定尺寸。Web您正在处理不同的维度，从宽屏幕高清显示器到纵向模式下的手机。更复杂的是，像素密度可能会在设备之间发生变化。总的来说，试图在网络上复制印刷媒体是愚蠢的。保证这一点的最好方法是，一个良好的扫描页面图像，这将极大地提高可访问性；永远不要在无法分辨像素密度或宽度的介质中使用对齐文本。单词间距将降低易读性，并且您永远无法（以一种简单的方式）使用连字符或kern（更改字母间距）来弥补该单词间距。利用媒介的力量，而不是与之对抗。如果你真的想这样做，请创建/使用一个在线pdf阅读器。谢谢你的两个回复，但是没有一个能让我们更接近一个解决方案。如果问题需要详细说明，请如此，我会喜欢更新更多的信息，例子或规格的问题是很清楚的。如果您确实必须重新创建打印的页面，请采纳@RickardElimäää的建议，并使用嵌入的PDF:。它会给你最大的控制权。web（HTML/CSS）并不是设计成这样的。任何javascript解决方案都可能以一种方式加载，然后以您想要的方式刷新。我认为OP希望行对齐，并在与原始行相同的位置断开。也就是说，CSS指令将给定的行拉伸，使其达到两个边距。将
与

结合使用不会减缓问题的速度，而且我将失去对每一行分别设置样式的能力。我认为“为什么”不那么重要，而“如果”和“如何”更有趣。然而，我们有一些页面，我们想显示在一个完整的搜索和索引方式的旧手稿。
@media
断点也不能解决问题，因为两个相同的屏幕大小可以显示（文本呈现）不同的内容，因此需要不同的特定宽度。解决这个问题的唯一方法不是使用
width
，而是使用类似
minmax
，
max width
。。