Question

我有一些我希望格式化的文字，以便第一个字母变大。没有CSS的文字看起来像这样：

<p>
  <span>V</span>estibulum et arcu sodales dolor sagittis sollicitudin. Pellentesque vitae eros nec lacus iaculis viverra. Maecenas vitae sapien et augue tincidunt elementum. Pellentesque velit. Mauris eget tellus. Proin ultricies scelerisque magna. Sed
  pretium tempor mi. Aenean vel lacus. Cras quam. Ut faucibus enim sed mauris. Morbi malesuada nunc eu arcu. Integer quam. Quisque ac nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac mi sit amet ante aliquet euismod. Ut suscipit.
  In turpis. In at diam nec elit malesuada venenatis. In nec leo nec est ullamcorper nonummy. Suspendisse in nisl. Nam dolor. Nunc
</p>

如果我只设置font-size span大于段落的字母，则字母确实变大，但下一个字母从右下角开始。我需要在右上角开始下一个字母，然后段落的行在大字母周围流动。我尝试过使用垂直内联，但似乎无法正确使用它。

Answer 1

在影响第一个字母的CSS中使用float: left;应该使剩余的文本环绕它。

作为旁注，您可以使用::first-letter伪元素来影响元素的第一个字母。

例如，每个<p>的第一个字母：

p::first-letter {
  font-size: 130%;
  float: left;
}

Answer 2

是你需要的吗？

  p:first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.5em;
    padding-bottom: 0.05em;
    padding-top: 0.2em;
  }

<p>Vestibulum et arcu sodales dolor sagittis sollicitudin. Pellentesque vitae eros nec lacus iaculis viverra. Maecenas vitae sapien et augue tincidunt elementum. Pellentesque velit. Mauris eget tellus. Proin ultricies scelerisque magna. Sed pretium tempor
  mi. Aenean vel lacus. Cras quam. Ut faucibus enim sed mauris. Morbi malesuada nunc eu arcu. Integer quam. Quisque ac nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac mi sit amet ante aliquet euismod. Ut suscipit. In turpis. In
  at diam nec elit malesuada venenatis. In nec leo nec est ullamcorper nonummy. Suspendisse in nisl. Nam dolor. Nunc</p>

与文本在它附近流动的大信

2 个答案: