HTML/CSS 在单独的块中对齐文本答案

【问题标题】：HTML/CSS justifying text in separate blocksHTML/CSS 在单独的块中对齐文本
【发布时间】：2020-03-23 16:15:34
【问题描述】：

从任何书籍或文章中获取任何页面，并尝试制作准确的在线复制品（与 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>
...

注一：

这个 CSS 技巧是不可扩展的，因为它依赖于渲染引擎，并且使用（在下面的示例中设置为 500px）的修复将破坏 A）太早并添加不需要的断线，B）太晚并添加较大的字间距或 C) 逐案评估，这也不好，因为它在桌面上可能是完美的，但在 A) 或 B) 上的移动设备上都达不到要求，反之亦然。

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

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

注意 2： 我更喜欢纯 HTML/CSS 解决方案，如果这不可能，让我们把 JS 放在桌面上......

【问题讨论】：

不要。印刷和网络是两种截然不同的媒介。打印您可以获得像素完美的结果，并且您正在处理固定尺寸。您正在处理不同尺寸的网络，从宽屏高清显示器到纵向模式的手机。更复杂的是，像素密度可能会在设备之间发生变化。一般来说，试图在网络上复制印刷媒体是愚蠢的。保证它的最佳方式是页面的良好扫描图像，这对可访问性产生了巨大影响。
作为平面设计师迁移到网页设计；永远不要在无法分辨像素密度或宽度的媒体中使用对齐文本。字间距会降低易读性，并且您永远不能（无论如何以简单的方式）连字符或紧缩（更改字母间距）来弥补该字空间。使用媒体的优势，而不是与之对抗。如果您真的想这样做，请创建/使用在线 pdf 阅读器。
感谢您的两个回复，但没有一个能让我们更接近解决方案。如果问题需要详细说明，我很乐意用更多信息、示例或规范更新它
问题已经很清楚了。如果您确实必须重新创建打印页面，请听取@RickardElimää 的建议并使用嵌入式 PDF：stackoverflow.com/questions/291813/…。它会给你最大的控制权。网络 (HTML/CSS) 的设计初衷并非如此。任何 javascript 解决方案都可能以一种方式加载，然后刷新为您想要的样式。

标签： html css text render

【解决方案1】：

您可以在必要时使用<p> 段落和<br> 中断标签。

CSS 也不会复杂

p {
   text-align: justify;
}

虽然我不确定

您的要求
为什么它必须是源的精确副本，因为网络是相当动态的。

C) 逐案评估也不好，因为它在桌面上可能是完美的，但在 A) 或 B) 上的移动设备上都达不到要求，反之亦然。

鉴于您也遇到了大小不同的问题，@media 查询可能会有所帮助。

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

您还可以有 2 个不同的 div，并在必要时隐藏一个，并显示另一个。

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

【讨论】：

我认为 OP 希望这些线是合理的，和在原来的相同位置中断。 IE。一个 CSS 指令，用于拉伸给定的线条，使其到达两个边距。
将<p> 与<br> 一起使用不会减缓问题的速度，而且我将失去单独设置每行样式的能力。我认为为什么不那么重要，而 if 以及在这种情况下 how 更有趣。但是，我们有一些页面希望以完全可搜索和可索引的方式显示旧手稿。 @media 断点也不能解决问题，因为两个相同的屏幕尺寸可以显示（文本渲染）不同的内容，从而需要不同的特定宽度。解决这个问题的唯一方法不是使用width，而是使用minmax、max-width..

【解决方案2】：

快速而肮脏的方式：

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

.page-container {
  max-width:100vw;
  overflow:auto;
}
.page-wrapper {
    text-align: justify;
    width: 82ch;
    background-color:#EEE;
    font-family:courier;
    font-size:15px;    
}

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

<div class="page-container">
<p 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>
</p>
</div>

有点花哨：

同上，但设置了一些媒体断点来调整字体大小。我会让你来计算字体大小和断点。

.page-container {
  max-width: 100vw;
  overflow: auto;
}

.page-wrapper {
  text-align: justify;
  width: 82ch;
  background-color: #EEE;
  font-family: courier;
  font-size: 15px;
}

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

@media screen and (max-width:768px) {
  .page-wrapper {
    background-color: #EFE;
    font-size: 12px;
  }

}

@media screen and (max-width:575px) {
  .page-wrapper {
    background-color: #FEE;
    font-size: 11px;
  }

}

<div class="page-container">
  <p 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>
  </p>
</div>

javascript可以添加什么

您可以使用 javascript 计算每行的最大字符数，并根据结果更新 ch 中的 with。

我听到有人问，为什么不根据宽度计算字体大小？那么问题在于字体大小是基于字符height，所以基于宽度是...有问题的。

【讨论】：