如何在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

我猜测问题是第一个字母停留在第一行,第二个字母停留在它下面.你希望第二个(等等)在第一个字母的右边.

您可以通过将第一个字母显示为块并将其浮动到左侧来完成此操作.

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