什么是优雅的解决方案(即不向文本添加
),当第一个单词是单个字母时,在首字母和第二个字母之间引入一个空格?
我正在尝试在段落的第一个字母上添加首字母大写。我遇到的问题是,如果第一个单词是 1 个字母的单词(例如 I),它看起来很困惑,这会导致后面的空格消失。
例子如下:
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>
解决方案必须保持行与行之间的行高相同,方法与 float: left
相同。
最佳答案
这有点难以理解,但请将您的 CSS 更改为这个。
p::first-letter {
font-size: 150%;
vertical-align: text-top;
}
float: left;
属性删除了间距,因此如果您将其替换为 vertical-align
,它会保留空格并将文本对齐到顶部达到预期的效果。
编辑
这里是 an example JSFiddle展示它的工作。
关于css - :first-letter when the first letter is immediately followed by a space? float 后如何保留空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43172587/