initial-letter

initial-letter CSS 属性用于设置首字母下沉、升起和凹陷的样式。

语法

css
/* Keyword values */
initial-letter: normal;

/* Numeric values */
initial-letter: 1.5; /* Initial letter occupies 1.5 lines */
initial-letter: 3; /* Initial letter occupies 3 lines */
initial-letter: 3 2; /* Initial letter occupies 3 lines and
                           sinks 2 lines */

/* Global values */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

关键字值 normal，或可选地后跟 <integer> 的 <number>。

值

normal

没有特殊首字母效果。文本按正常方式显示。

<number>

定义首字母的大小，以它所占行的数量来表示。不允许使用负值。

<integer>

定义首字母应下沉的行数，前提是指定了首字母的大小。值必须大于零。如果省略，它将复制大小值，并向下取整到最接近的正整数。

正式定义

初始值normal
应用于::first-letter 伪元素和块级容器的内联级第一个子级
继承否
计算值按指定方式
动画类型按计算值类型

正式语法

initial-letter = 
  normal                               |
  <number [1,∞]> <integer [1,∞]>       |
  <number [1,∞]> && [ drop | raise ]?

示例

设置首字母大小

HTML

html
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</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;
}

结果

规范

规范
CSS 内联布局模块级别 3
# sizing-drop-initials

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅