A label needs room
How does a longer action label behave as its available width decreases?
- Enter the sample text. Choose normal wrapping, a width of 360 CSS pixels, and a font size of 20 CSS pixels. Keep the same browser zoom throughout this run.
- Record the preview's displayed width and height and whether any text extends beyond the box. Export the settings as your baseline.
- Change only the width to 280 CSS pixels, then to 200 CSS pixels. Record the same observations after each change.
- Return to 360 CSS pixels and compare with your baseline. If the lab is constrained by a narrow screen, record the actual preview width as well as the requested width.
Illustrative expectations, not measured results:
- The sentence may occupy more lines at narrower widths, increasing the text block's height when that height is allowed to grow.
- The exact line breaks depend on the rendered font and available content width. This experiment does not predict a specific line count.
- A larger block is an observation to assess in the surrounding design, rather than an automatic failure.
Sources: MDN: white-space
One very long string
What changes when the text has no spaces where an ordinary line can break?
- Enter the sample identifier. Set the width to 240 CSS pixels, the font size to 20 CSS pixels, and normal wrapping.
- Record the preview's dimensions and horizontal overflow state. Keep the identifier, width, and font size unchanged.
- Switch to break anywhere. Record where the string breaks and how the block's height changes.
- Switch to no wrap, then return to normal wrapping. Export each configuration you want to compare and write down the observed differences.
Illustrative expectations, not measured results:
- Normal wrapping may leave a long identifier extending beyond its line box when there is no acceptable ordinary break point.
- With wrapping enabled, overflow-wrap: anywhere allows an otherwise unbreakable string to break when needed. This can exchange horizontal overflow for additional lines.
- No-wrap mode prevents automatic line wrapping. The resulting overflow still depends on the string and available width.
Sources: MDN: overflow-wrap, MDN: white-space
Larger text, same box
How much does a fixed-width text block change when its type gets larger?
- Enter the sample sentence. Set normal wrapping, a width of 320 CSS pixels, and a font size of 16 CSS pixels. Record the actual preview width.
- Increase only the font size to 24 CSS pixels, then to 32 CSS pixels. Record the block's displayed height, visible breaks, and any horizontal overflow.
- Return the font size to 16 CSS pixels. Reduce the width to 240 CSS pixels, then repeat the same three font sizes.
- Export the settings you want to preserve. Compare runs with the same width first, then runs with the same font size.
Illustrative expectations, not measured results:
- Larger text generally needs more room. Depending on the available width, that may mean additional lines as well as taller lines.
- A small size change near a wrapping boundary may move a whole word to the next line. The change in block height need not be smooth.
- Changing the lab's font-size control is one layout experiment. It does not reproduce every effect of browser zoom or establish WCAG conformance.
Sources: MDN: white-space, W3C WAI: Understanding Reflow