Question

什么是优雅的解决方案（即没有在文本中添加 ），当第一个单词是单个字母时，在首字母和第二个字母之间引入空格？

我试图将大写字母添加到段落的第一个字母。我遇到的问题是，如果第一个单词是一个单字的单词，如 I ，会导致后面的空格消失，这看起来很混乱。

以下是一个例子：

＆＃13;

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

＆＃13;

<p>Some text.</p>

<p>
    I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text.
</p>

＆＃13;

解决方案必须保持行之间的行高度与float: left相同。

Answer 1

要弄明白这一点有点棘手，但要将CSS更改为此。

p::first-letter {
  font-size: 150%;
  vertical-align: text-top;
}

float: left;属性正在移除间距，因此如果您将其替换为vertical-align，则会保留空间并将文本与顶部对齐以获得所需效果。

<强> 修改

以下an example JSFiddle表明它正常运作。

Answer 2

以下解决方案保留第一个字符后面的空格。

p {
  white-space: pre-wrap;
}

p::first-letter {
  font-size: 150%;
  float: left;
}

<p>Some text.</p>

<p>I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text. I am some long text.</p>

NB ：这需要将p的内部html格式化为一行，并且空白对于行的其余部分是正确的，这样它就不会干扰剩下的空白。

浮动后如何保留空格：第一个字母后面紧跟一个空格后的第一个字母？

2 个答案: