html - 如何在 html 和 css 中创建段落首字母大写(特殊格式)

Question

请帮助我在 html 和 css

中创建这种 段落格式

CSS 和 HTML:

.home-p-main {
  font-family: Times New Roman;
  font-size: 10pt;
  text-align: left;
  position: relative;
  margin-left: 10pt;
  margin-right: 10pt;
  position: absolute;
  margin-top: 1pt;
  color: black;
  background-color: aliceblue;
  text-indent: 10pt;
}
.home-p-main::first-letter {
  text-transform: capitalize;
  color: red;
  font-size: 300%;
  font-weight: bold;
  padding-left: 25px;
  position: relative;
  margin-left: -26px;
}

<p class="home-p-main">The Linux open source operating system, or Linux OS</p>

只需使用 html 和 css

Answer 1

我猜问题是第一个字母留在第一行，第二行在它下面。您希望第二个(依此类推)位于第一个字母的右侧。

您可以这样做，方法是将第一个字母显示为一个 block ，并将其 float 到左侧。

CSS 看起来像这样(删除了不必要的行)

.home-p-main{
    font-family: Times New Roman;
    font-size: 10pt;
    margin-left: 10pt;
    margin-right: 10pt;
    margin-top: 1pt;
    background-color: aliceblue;
}
.home-p-main:first-letter{
    text-transform:capitalize;
    color: red;
    font-size: 500%;
    font-weight: bold;
    display: block;
    float: left;
    margin-right: 5pt;
}

DEMO