html - 将段落新行与上行的填充对齐

Question

我有一些来自数据库的要点。在每个段落之前我需要显示一个勾号。我已经使用 ::before 伪属性放置了刻度线。

根据屏幕尺寸，一个段落会进入另一行。但我希望第二行从第一行开始的地方开始，而不是从刻度线开始的地方开始。

这是fiddle 。

代码:

p::before {
  content: "\2714";
  color: #00839F;
}
p {
  padding-left: 20px
}

<div>
  <p>
    this is one paragraph and the text starts in new line aligned with tick mark and some more texts to push it to second line
  </p>
  <p>
    this is another paragraph
  </p>
</div>

Answer 1

您可以在p上使用text-indent，它将与您可能使用的任何font-size一起使用(对于大字体 - 例如: 36px - 您可能必须在 p::before 中使用 margin 来调整所有内容)请参阅下面的代码片段:

代码片段

p::before {
  content: "\2714";
  color: #00839F;
}
p {
  padding-left: 20px;
  text-indent: -1em
  /*font-size is 16px by default*/
}
p:first-child {
  font-size: 20px
}
p:last-child {
  font-size: 22px
}

<div>
  <p>
    this is one paragraph and the text starts in new line aligned with tick mark and some more texts to push it to second line
  </p>
  <p>
    this is another paragraph
  </p>
  <p>
    this is one paragraph and the text starts in new line aligned with tick mark and some more texts to push it to second line
  </p>
</div>