将白色空间设置为pre不会保留额外的空白区域

Question

我使用white-space:pre css属性来保留html元素值中的空白字符。浏览器html dom看起来像这样，

但是在渲染时，li元素的值会被修剪，我尝试使用的两个表格列格式变坏了，它只是一个单独的字符串。

如何使用css / js渲染多个空白字符？

Answer 1

您在DOM中设置了white-space="pre"。它属于css。

您需要以下内容：

li {
    white-space: pre;
}

您还需要使用单倍间距字体（在非等宽字体中，空格字符不像其他字符那么宽。因此，尽管列数相同，但它们的宽度不同。）< / p>

li {
  white-space: pre;
  font-family: mono;
}

<ul>
  <li>Lorem ipsum dolor  lorem</li> 
  <li>Lipsum dolor       lorem</li>
  <li>Lorem ipsum        lorem</li>
  <li>Lorem ipsum dor    lorem</li>
</ul>

@freefaller已经指出这可以使用这样的内联css来完成：

<ul>
  <li style="white-space: pre;">Lorem ipsum dolor  lorem</li> 
  <li style="white-space: pre;">Lipsum dolor       lorem</li>
  <li style="white-space: pre;">Lorem ipsum        lorem</li>
  <li style="white-space: pre;">Lorem ipsum dor    lorem</li>
</ul>

我不推荐这种解决方案的原因是，如果你想改变它，你必须改变每一行。 HTML用于描述内容（例如header或body），而不会告诉浏览器它的外观。