如何在 html & css 中创建段落首字母大写（特殊格式）

Question

请帮助我在 html & [=36= 中创建段落 的格式]

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

有一个属性：

.home-p-main {
    text-transform: capitalize;
}

如果您希望第一个单词的第一个字母大写，请改用 :first-letter 并进行不同的转换（尽管这并不重要）。请注意，为了使 :first-letter 起作用，您的 a 元素需要显示为块：

.home-p-main {
    display: block;
}

.home-p-main:first-letter {
    text-transform: uppercase;
}

Answer 2

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

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

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

Answer 3

CSS

   .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;
        width:100px;   
    }
    .home-p-main::first-letter{
        font-size: 300%;
      float: left;
      height: 64px;
      margin-right: 10px;
      color: rgb(245, 10, 10);
      border-radius: 5px;

    }

For this to work as you wished you have to remove text-indent from .home-p-main class and if you wish the words to be aligned perfectly in-spite of break letters use word-break: break-all; in the .home-p-main class

DEMO