在 HTML 中的文本开头显示白色 space

Question

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

比如我想用

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

但它的行为与

完全一样

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

我该怎么做？

Answer 1

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

<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>

Answer 2

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

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

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

Answer 3

要缩进段落，请使用 text-indent:1em;

您无法在 HTML 中创建白色 space，因为 whitespace is always collapsed 到文本区域中的一个 space。

Answer 4

正常使用这个space:

p {
      white-space: pre-line;
  }

Answer 5

要缩进段落，请在 CSS

中使用 :before

p:before {
    content: '';
    display: inline-block;
    width: 30px;
}

在 HTML 中的文本开头显示白色 space

Show white space at the beginning of a text in HTML

html

whitespace