CSS ::第一个字母的选择符的行间距

当制作第一个字母比段其余部分大（就像在讲故事书）第一线的间距打破：CSS ::第一个字母的选择符的行间距

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

https://jsfiddle.net/7zka3jsy/

正如你所看到的，第一行比段落的其余部分有更大的空间，因为：第一个字母不会刚刚移动，而是向下移动。

来源

2017-04-20 user3108268

可以通过为第一个字母设置适当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.

来源

2017-04-20 14:41:21 snkv

这里的关键是使用对'行高很好的解决方案em'单元++ – DaniP

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

来源

2017-04-20 14:37:14 Vadzim

只需添加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>

来源

2017-04-20 14:45:38

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

这里是更新

Updated JS Fiddle:https://jsfiddle.net/7zka3jsy/4/

来源

2017-04-20 15:26:33 Umesh

，因为它是第一个字母，将永远不会超过两行，只需在p::first-letter伪类选择的line-height值设置为0。

例

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

这将允许你在p::first-letter伪类选择和/或在p选择器font-size和line-height值（一个或多个）独立地改变font-size值。

设置line-height价值0保证在不同的浏览器渲染引擎一致的结果，而不一定是它的值设置为其他值（例如0.9）一样。

Fiddle修订

来源

2017-04-20 15:32:05 RobC

CSS ::第一个字母的选择符的行间距

回答

相关问题