Question

当第一个字母大于段落的其余部分时（如讲故事书），第一个换行符的间距：

p::first-letter {
    font-size: 250%;
}

https://jsfiddle.net/7zka3jsy/

正如您所看到的那样，第一行的空间大于段落的其余部分，因为：第一个字母不会向上移动，而是向下移动。

Answer 1

您可以通过为第一个字母设置正确的 line-height 和 vertical-align 来执行此操作：

p::first-letter {
  font-size: 250%;
  vertical-align: bottom;
  line-height: .9em;
}

<强> Fiddle here.

或者，只需应用一些整洁的 dropcase 类似书籍的样式：

p::first-letter {
  font-size: 250%;
  float: left;
  padding-right: 7px;
  padding-bottom: 5px;
}

<强> Fiddle here.

Answer 2

[2017-04-20 10:30:30] request.CRITICAL: Uncaught PHP Exception ReflectionException: "Class AppBundle\Entity\Propietario does not exist" at /usr/share/nginx/mecanicos/var/cache/prod/classes.php line 9374 {"exception":"[object] (ReflectionException(code: -1): Class AppBundle\\Entity\\Propietario does not exist at /usr/share/nginx/mecanicos/var/cache/prod/classes.php:9374)"} []
[2017-04-20 10:30:30] security.DEBUG: Stored the security token in the session. {"key":"_security_main"} []

Answer 3

只需将line-height: 18px;添加到p代码

即可

p::first-letter {
font-size: 250%;
}
p{
line-height:18px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque egestas gravida. In turpis tellus, blandit vel facilisis a, viverra vitae lectus. In vitae ullamcorper nulla, hendrerit condimentum tellus. Morbi purus sapien, convallis et facilisis non, ornare non ante. Morbi et sapien et ante tincidunt lobortis nec a dolor. Nunc id rutrum velit, quis tempor tortor. Suspendisse nec orci non tellus tempus feugiat et quis turpis. Etiam viverra lacus rhoncus dolor vestibulum, in dictum diam ultricies. Praesent urna nulla, finibus ut nulla at, scelerisque posuere nisi. Etiam faucibus turpis sit amet ipsum efficitur vestibulum. Phasellus sit amet ipsum vitae quam euismod ullamcorper. Fusce pellentesque tellus nisl, aliquet luctus est dignissim id. Sed sit amet erat non purus feugiat pretium sit amet sit amet dui. Aenean ligula mi, tincidunt tincidunt dui ac, auctor consequat ante. Proin vitae tincidunt tellus, quis mollis elit. 
</p>

Answer 4

您需要使用伪类第一个字母指定首字母的位置，然后将任何框模型样式（如填充或边距）添加到html元素。

这是更新的

q = X.objects.filter(annotated_val=5, annotated_name='Nima') q.query.annotations.clear() q.filter().update(field=900) https://jsfiddle.net/7zka3jsy/4/

Answer 5

因为它是第一个字母，并且永远不会转到两行，只需在line-height伪类选择器中将0值设置为p::first-letter即可。

示例

p::first-letter { font-size: 250%; line-height: 0; }

这将允许您更改font-size伪类选择器中的p::first-letter值和/或{{1}中的font-size和line-height值选择器独立。

将p值设置为line-height可以保证不同浏览器呈现引擎的结果一致，而将其值设置为其他值（例如0）则不一定如此。

修订Fiddle

CSS ::第一个字母选择器会打破行间距

5 个答案: