如何制作空白：预包装；证明文本？答案

【问题标题】：How to make white-space: pre-wrap; justify text?如何制作空白：预包装；证明文本？
【发布时间】：2020-01-22 00:15:17
【问题描述】：

我在 pre 标签中有这样的文本：

 <pre style="white-space: pre-wrap; font-family: Georgia, 'Times New Roman', Times, serif;">
        ${htmlText} 
 </pre>

对齐文本在 white-space: pre-wrap; 中不起作用。但如果文本不是white-space: pre-wrap;，则删除文本空白。我需要保留文本空白并且仍然能够证明文本的合理性。

我也试过white-space: pre; 和overflow-wrap: break-word。这可行，但在换行时会拆分单词。我需要证明在不分裂/断词的情况下工作。

如何让text-align: justify; 与white-space: pre-wrap; 一起工作？或者您如何在以不打断文字的方式包装文本的同时生成white-space: pre;？

【问题讨论】：

考虑发布有关该问题的更多详细信息。也许有一个不涉及white-space 属性或<pre> 标签的解决方案。
我在问题中添加了另一个潜在的解决方案，如果有办法在不破坏单词的情况下换行。

标签： html css

【解决方案1】：

white-space: pre-wrap; 对text-align: justify; 没有影响这里是一个例子

.a
{
white-space: pre-wrap;
text-align: justify;
}

<pre class="a">
  <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
  <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph</p>
  <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph</p>
 </pre>

【讨论】：

这对我不起作用。这是一个普遍存在的问题，我还没有找到答案。

【解决方案2】：

看起来没有解决办法。我能做的最接近的事情是设置white-space: normal 并为每个p 标签赋予css 属性text-indent: 30px;。

这将使文本对齐并在每个段落的开头添加缩进。但它也会删除所有空格多于一个空格。现在这对我有用，因为我最感兴趣的是在段落的开头添加额外的空格。

【讨论】：