CSS initial-letter Property
Example
Show different size of initial-letter:
.normal::first-letter {
-webkit-initial-letter: normal;
initial-letter: normal;
}
.two::first-letter {
-webkit-initial-letter:
2;
initial-letter: 2; /* Initial letter occupies 2 lines */
}
.four::first-letter {
-webkit-initial-letter: 4;
initial-letter: 4; /* Initial letter occupies 4 lines */
}
.four2::first-letter {
-webkit-initial-letter: 4 2;
initial-letter: 4 2; /* Initial letter occupies 4 lines and sinks 2 lines */
}
Try it Yourself »
Definition and Usage
The initial-letter property specifies the
size of the initial-letter and optionally the number of lines the initial letter
should sink (down in the text).
This property applies to :first-letter
pseudo-elements and inline-level first child of a block container.
| Default value: | normal |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| initial-letter | 110.0 | 110.0 | Not supported | 9.0 -webkit- | 96.0 |
CSS Syntax
initial-letter: normal|number|integer;
Property Values
| Value | Description |
|---|---|
| normal | Default. No effect. Text behaves as normal |
| number | Sets the size of the initial letter (how many lines the initial letter should span) |
| integer | Optional. Sets the number of lines the initial letter should sink (in the text) |
