Line Height
| Atomic Props | CSS Properties |
|---|---|
| leadingNone | line-height: 1; |
| leadingTight | line-height: 1.25; |
| leadingSnug | line-height: 1.375; |
| leadingNormal | line-height: 1.5; |
| leadingRelaxed | line-height: 1.625; |
| leadingLoose | line-height: 2; |
Usage
There are two ways to control the line height of the text, one is to use a preset value, and the other is to use a precise pass value.
Use preset value: leadingNone、leadingTight、leadingSnug、leadingNormal、leadingRelaxed、leadingLoose.
leadingNone
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.leadingTight
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.leadingSnug
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.leadingNormal
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.leadingRelaxed
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.leadingLoose
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.<Box>
<Box leadingNone>Lorem ipsum dolor sit amet...</Box>
<Box leadingTight>Lorem ipsum dolor sit amet...</Box>
<Box leadingSnug>Lorem ipsum dolor sit amet...</Box>
<Box leadingNormal>Lorem ipsum dolor sit amet...</Box>
<Box leadingRelaxed>Lorem ipsum dolor sit amet...</Box>
<Box leadingLoose>Lorem ipsum dolor sit amet...</Box>
</Box>
Use precise value:
Result
Loading...
Live Editor