CSS font-stretch Property
Clash Royale CLAN TAG#URR8PPP <!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
CSS font-stretch Property
❮
Reference
❯
Example
Make the text in all <div> elements wider:
div
font-stretch: expanded;
Try it Yourself »
Definition and Usage
The font-stretch property allows you to make text wider or narrower.
| Default value: | normal |
|---|---|
| Inherited: | yes |
| Animatable: | yes. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.fontStretch="expanded" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| font-stretch | Not supported | Not supported | Not supported | Not supported | Not supported |
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Syntax
font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;Property Values
| Value | Description |
|---|---|
| ultra-condensed | Makes the text as narrow as it gets |
| extra-condensed | Makes the text narrower than condensed, but not as narrow as ultra-condensed |
| condensed | Makes the text narrower than semi-condensed, but not as narrow as extra-condensed |
| semi-condensed | Makes the text narrower than normal, but not as narrow as condensed |
| normal | Default value. No font stretching |
| semi-expanded | Makes the text wider than normal, but not as wide as expanded |
| expanded | Makes the text wider than semi-expanded, but not as wide as extra-expanded |
| extra-expanded | Makes the text wider than expanded, but not as wide as ultra-expanded |
| ultra-expanded | Makes the text as wide as it gets |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
❮
Reference
❯