Nativ Blog · standalone browser exercise
The words changed.
The box didn’t.
Compare a fixed label with one that can wrap and grow. These are HTML/CSS specimens, not a Figma simulation or a Nativ translation result. The German draft is manually supplied for layout inspection.
01 / English source
Fixed width · fixed height
02 / Same constraint
Target text · fixed box
03 / Room to grow
Target text · wrapping · auto height
The dashed outline is the available outer container, including 12 px padding per side. Each label has 16 px horizontal padding. No font shrinking or character deletion is applied. A long unbroken word can still overflow the flexible case: test that explicitly.
What to try
- Compare the same draft at 180 px and 260 px outer width.
- Increase text size and check the source again too.
- Try a long unbroken test token, such as “WWWWWWWWWWWWWWWWWWWWWWWW”. Wrapping alone cannot solve every case.
The readouts compare DOM scroll and client dimensions. They detect box overflow in this specimen, not language quality, Figma behaviour, accessibility conformance or every kind of clipping.
Read the Figma diagnosis and review workflow →