Question

我只是嘲笑一个练习页面，看看我能自己找到什么。

我的目标是用不同的字体偏移左边所有段落的第一个字母，但它给了我麻烦。

使用-1.0em边距时，文本最终未对齐。完成此任务的最佳方法是什么？我对网络开发很新，所以对我很轻松！

＆＃13;

p::first-letter {
  font-family: 'Cedarville Cursive';
  font-size: 2.0em;
  margin-left: -1.0em;
  text-transform: uppercase;
}

＆＃13;

<div id="bodyWrap">

  <h1 id="header" class="underline">Placeholder</h1>

  <hr>
  <p>Some more placeholder text </p>

  <p>Some more placeholder text </p>

  <p>Some more placeholder text </p>

  <hr>

  <footer>Placeholder</footer>

</div>

＆＃13;

期望的结果是让每个段落中的第一个字母轻推到一边而不影响段落的位置。

Answer 1

您可以使用伪元素将该字母作为可单独设置样式的元素：

p {
  margin: 50px;
  position: relative;
}

p::first-letter {
  opacity: 0;
}

p::before {
  content: attr(data-lettre);
  display: inline-block;
  position: absolute;
  margin-left: -20px;
  margin-top: -20px;
  font-size: 30px;
  font-weight: bold;
  font-family:arial;
}

<p data-lettre="L">
  Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume
</p>

如果您想使用first-letter，可以像这样调整间距。

由于我们处理文字，因此在这种情况下无法进行上/下移动

p {
  margin: 50px;
  position: relative;
}

p::first-letter {
  margin-left:-1em;
  margin-right:1em; /*add the same as the margin-left*/
  font-size: 2.0em;
  text-transform: uppercase;
  font-family:arial;
}

<p>
  Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume
</p>

Answer 2

您可以使用letter-spacing：

    p::first-letter {
      font-family: 'Cedarville Cursive';
      font-size: 2.0em;          
      text-transform: uppercase;
      letter-spacing: 5px;
    }

    <div id="bodyWrap">
      <h1 id="header" class="underline">Placeholder</h1>
      <hr>
      <p>Some more placeholder text </p>
      <p>Some more placeholder text </p>
      <p>Some more placeholder text </p>
      <hr>
      <footer>Placeholder</footer>
    </div>

Answer 3

::first-letter伪元素适用于元素的第一个字母，但它不会将其从正常流中删除，也不会将该字母包装在单独的可选元素中。

这意味着您可以更改字母的印刷和其他一些品质（list），但是如果不移动整个元素，您就无法移动它。

如果要偏移字母，请创建嵌套容器并使用相对定位。然后使用CSS偏移属性（top，bottom left和right）来定位该字母。

＆＃13;

p > span {
  font-family: 'Cedarville Cursive';
  font-size: 2.0em;
  text-transform: uppercase;
  position: relative;
  top: -5px;
  left: -5px;
  
}

＆＃13;

<p><span>P</span>ositioning only the first letter.</p>

＆＃13;

CSS如何在没有负边距的情况下抵消第一个字母？

3 个答案: