Sk.Text

Multi-line text block with a shorter last line.

When generated by analyze, height is set to the element's computed font-size and lineHeight to the computed line-height, so each bar looks visually natural while the element takes up exactly the same space as real text.

Live preview

<Sk.Text />

<Sk.Text lines={3} />

<Sk.Text lines={3} lastLineWidth="40%" />

<Sk.Text height="14px" lineHeight="20px" width="200px" />

Usage

<Sk.Text />                                    // single line, full width
<Sk.Text lines={3} />                          // 3 lines
<Sk.Text lines={3} lastLineWidth="40%" />
<Sk.Text width="80%" />
<Sk.Text height="14px" lineHeight="20px" />    // precise sizing (auto-generated)
<Sk.Text lines={3} height="14px" gap="6px" />  // multi-line with exact gap

Props

Prop	Type	Default	Description
`lines`	`number`	`1`	Number of text lines
`width`	`string`	`'100%'`	Width of all lines except last
`lastLineWidth`	`string`	`'60%'`	Width of the last line (multi-line only)
`height`	`string`	`'1em'`	Height of each bar (set to `font-size` by analyzer)
`lineHeight`	`string`	—	Outer container height for single-line (set to computed `line-height` by analyzer for layout stability)
`gap`	`string`	`'0.4em'`	Gap between bars (multi-line only; set by analyzer so total height matches bounding box)
`className`	`string`	—	Applied to outer wrapper; use for margin/spacing classes

Overview Sk.Heading