text-align 像 word 中一样对齐答案

【问题标题】：text-align justify like in wordtext-align 像 word 中一样对齐
【发布时间】：2017-04-03 18:20:39
【问题描述】：

如何将带有text-align: justify; 的段落和文本中的换行符转换为整个行宽？

HTML 默认是用换行符向左对齐行。我喜欢将它投射到整个行宽上，就像在 word 和其他印刷软件中一样。

为避免误解，澄清印刷软包装和硬包装：

软换行：换行
硬换行：段落分隔符/和新段落的开始

证明铸造词的正确性

证明投射网络浏览器的合理性

<p style="text-align: justify; font-family: Arial, Lora, Open Sans;">This text has text-align: justify; in the web browser as you can see in this paragraph. Now soft wraps follow.<br>
    This is a test<br>
    to show how text<br>
    is cast in word<br>
    And the text is aligned to left in stead of casting it to 100% width.</p>

【问题讨论】：

你能显示你的标记吗？我认为这种行为是意料之中的，您在网络浏览器中看到的实际上是硬包装（您是否使用<br> 换行？）。软换行由布局引擎自动执行，并且在发生时应完全对齐文本。另一方面，硬包装不会被铸造成全宽。再说一次，除非您共享标记，否则我无法真正诊断您的问题。
@Terry 我使用
作为软换行。我希望
等效于印刷软包装，段落结尾等效于印刷硬包装。
还要检查您的字体名称，因为有些字体不支持这种格式，请尝试使用“Arial”等常用字体系列。
字体据我所知应该无关紧要。既不适用于 Arial、Open Sans 也不适用于 Lora
我很确定它只是不受支持。甚至text-justify 属性似乎也缺少这种格式。

标签： html css

【解决方案1】：

我认为问题在于您的文本没有像在 MS Word 中那样按行分隔。

注意请记住，您不能在 CSS 中证明单行。要解决这个问题，请使用 hack 和 :after 元素：

p {
  text-align: justify;
}

p:not(:last-child):after {
  content: "";
  display: inline-block;
  width: 100%;
}

<div>
  <p>
  This is text
  </p>
  <p>
  to show how text
  </p>
  <p>
  is cast in word
  </p>
</div>

【讨论】：

抱歉问题不清楚。我知道您的解决方案，但这仅适用于多个段落。在我的情况下，实际上我确实有排版软换行意义上的换行符，而不是段落换行。查看已编辑的问题。