initial-letter
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
语法
css
/* 关键字值 */
initial-letter: normal;
/* 数值 */
initial-letter: 1.5; /* 首字母占据了 1.5 行 */
initial-letter: 3; /* 首字母占据了 3 行 */
initial-letter: 3 2; /* 首字母占据了 3 行并下沉了 2 行 */
/* 全局值 */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;
关键词值为 normal
,或者是一个 <number>
,后面可以跟一个 <integer>
。
值
形式定义
初始值 | normal |
---|---|
适用元素 | ::first-letter pseudo-elements and inline-level first child of a block container |
是否是继承属性 | 否 |
计算值 | as specified |
动画类型 | 按计算值的类型 |
形式语法
initial-letter =
normal |
<number [1,∞]> <integer [1,∞]> |
<number [1,∞]> && [ drop | raise ]?
示例
设置首字母大小
HTML
html
<p class="normal">首字母大小是正常的</p>
<p class="onefive">首字母大小占据了 1.5 行</p>
<p class="three">首字母大小占据了 3 行</p>
CSS
css
.normal::first-letter {
-webkit-initial-letter: normal;
initial-letter: normal;
}
.onefive::first-letter {
-webkit-initial-letter: 1.5;
initial-letter: 1.5;
}
.three::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
}
结果
规范
Specification |
---|
CSS Inline Layout Module Level 3 # sizing-drop-initials |
浏览器兼容性
BCD tables only load in the browser