Testing text spacing on a community-services page
Apply a text-spacing override and investigate lost content and functionality in a community support directory.
- Difficulty:
- beginner
- Estimated time:
- 20 minutes
Objectives
- Compare representative content before and after applying the complete text-spacing condition.
- Confirm that all four override values are active before interpreting the result.
- Identify content and control labels lost through clipping, overlap, truncation, or clamping.
- Record six findings, including text that resists the override, and useful passing comparisons that expand or wrap correctly.
Instructions
Use Testing text spacing and user overrides while investigating the community support directory.
- Record your browser, operating system, viewport, theme, page state, and override mechanism.
- Review the complete page before applying the test condition. Record representative content and controls that are fully available.
- Activate Apply test text spacing and confirm that the complete condition is active.
- Inspect every text-bearing region and control at the same viewport. Do not treat wrapping or a taller component as a failure when everything remains available.
- Identify exactly six problems, including any content for which the override does not take effect, and record useful passing comparisons.
- Reset the spacing and confirm that each suspected problem disappears, then reapply it to establish causation.
- For every finding, record actual and expected behavior, likely user impact, and remediation direction.
The assisted control applies the four values only to this practice page. On other sites, use a reliable extension, bookmarklet, user stylesheet, or developer tools and confirm the computed values before interpreting the result.
Exercise workspace
Community services text-spacing exercise
The exercise opens on a separate page. Return to this page whenever you need a hint, or when you are ready to continue and review the solution.
You can open the exercise in a new tab if you want to keep these instructions and hints available.
Hints
- Look for containers that should become taller when their text needs more space. Check whether all lines remain available.
- Inspect wrapping, truncation, overlap, line clamping, and whether every control still exposes its complete visible label.
- Check the introduction, one service card, one service-navigation item, the important notice, one contact action, and content that does not visibly change.
Solution
The page contains six problems caused by fixed sizing, positioning, single-line constraints, hidden overflow, and authored styles that prevent the user override, alongside flexible passing comparisons.
The introductory panel clips its final lines
The panel has a fixed height and hides overflow. It fits the initial copy but cannot grow after the spacing override. Remove the fixed height and allow the container to expand with its text.
A service-card heading overlaps its description
The family-support card positions its heading and description at fixed locations. The expanded heading occupies the description's space. Keep text in normal document flow and let the card grow.
A service-navigation label is truncated
The housing-advice link forces its label onto one line inside a fixed width and hides overflow. Allow the label to wrap or the component to expand without removing words.
The important notice hides paragraph content
The notice limits its paragraph to three rendered lines. Increased spacing needs more lines, so part of the message disappears. Remove the clamp when the complete text is required.
A contact button clips its complete label
The community-support button has fixed width and height, prevents wrapping, and hides overflow. Use flexible minimum sizing and allow its label to wrap or the button to grow.
The urgent-support paragraph resists the spacing override
Higher-specificity authored declarations marked as important keep the paragraph's line height, paragraph spacing, letter spacing, and word spacing unchanged. Remove or restructure declarations that block user overrides; do not hard-code the test values as the page defaults.