在 HTML 文本的开头显示空格

Question

如何在 HTML 中的文本开头显示空白？

例如，我想使用

<p>             This is a paragraph.</p> //             This is a paragraph.

但它的行为完全一样

<p>This is a paragraph.</p>

我该怎么做？

原文由 user6468132 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 CSS 中使用不会折叠空格的 white-space: pre; 属性：

     p {
    	white-space: pre;
    	color: black;
    	background: pink;
    }

     <p>             This is a paragraph.</p>

原文由 Rokin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你必须有空格，你可以使用   ，所以代码看起来像：

 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is a paragraph.</p>

对于 5 个空格。虽然我认为你可能最好使用 css 添加填充/边距样式来实现你所追求的。

编辑

使用填充方法添加的代码段：

 p.padded {
  padding:.3em .5em .1em 2em;
}

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptas, culpa, quam, totam ex illum earum cupiditate, odit delectus cum atque dignissimos. Culpa praesentium perspiciatis incidunt pariatur. Doloremque, illum, sequi.</p>

<p class="padded">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptas, culpa, quam, totam ex illum earum cupiditate, odit delectus cum atque dignissimos. Culpa praesentium perspiciatis incidunt pariatur. Doloremque, illum, sequi.</p>

原文由 Mike Harrison 发布，翻译遵循 CC BY-SA 3.0 许可协议