Question

我有初始上限的问题（第一个字母大）。

.article {
    text-align:justify;
    text-wrap: unrestricted;
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

.article:first-letter {
    font-size:38px;
    float:left;
    line-height: 38px;
}
.article:first-line { line-height: 100%; }

首先：在firefox中，这封信就像一个超文本一样向上移动。我尝试使用vertical-align但没有成功。我注意到它只在firefox中呈现。

第二：我希望上限为40px（现在是38px）。当我添加2个额外像素时，小文本中的第三行也会缩进。为什么？它是否为任何低于文本的不寻常字母（如j）腾出空间？

Answer 1

我认为您可以调整:first-letter伪类的边距。

JS Fiddle

Answer 2

在第一个字母上添加一些填充似乎会将其拉回到行 - http://jsfiddle.net/duncan/aBYQx/

.article {
    text-align:justify;
    text-wrap: unrestricted;
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

.article:first-letter {
    font-size:40px;
    float:left;
    line-height:40px;
    padding:.125em 

}
.article:first-line { line-height: 100%; }

至于增加的空间，我认为它是为了适应下行

Css初始上限

2 个答案: