initial-letter
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
initial-letter
CSS 属性用于设置首字符的样式,包括嵌入、凸起和下沉。这个属性适用于 ::first-letter
伪元素以及区块容器内的首个行内级子元素。
语法
css
/* 关键字值 */
initial-letter: normal;
/* 一个值 */
initial-letter: 3; /* 高度为 3 行,基线位于第 3 行 */
initial-letter: 1.5; /* 高度为 1.5 行,基线位于第 2 行 */
/* 两个值 */
initial-letter: 3 2; /* 高度为 3 行,基线在第 2 行(上升了 1 行) */
initial-letter: 3 1; /* 高度为 3 行,基线未变(上升了 2 行) */
/* 全局值 */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;
值
形式定义
初始值 | 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;
}
p {
outline: 1px dashed red;
}
结果
设置下沉值
在这个例子中,所有首字母的大小都相同,但下沉值不同。
HTML
html
<p class="four">首字母大写:下沉值 = 4</p>
<p class="same">首字母大写:未声明下沉值(与大小相同)</p>
<p class="two">首字母大写:下沉值 = 2</p>
<p class="one">首字母大写:下沉值 = 1</p>
CSS
css
.four::first-letter {
-webkit-initial-letter: 3 4;
initial-letter: 3 4;
}
.same::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
}
.two::first-letter {
-webkit-initial-letter: 3 2;
initial-letter: 3 2;
}
.one::first-letter {
-webkit-initial-letter: 3 1;
initial-letter: 3 1;
}
p {
outline: 1px dashed red;
}
结果
规范
Specification |
---|
CSS Inline Layout Module Level 3 # sizing-drop-initials |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
initial-letter | ||||||||||||
normal |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
- Requires a vendor prefix or different name for use.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
参见
::first-letter
:first-child
- CSS 中的首字母下沉效果,由 Oddbird 提供(2017)