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 ::第一個字母的選擇符的行間距

回答

相關問題