Inspect the working example
The paragraph contains one fixed filename-like identifier with no spaces. overflow-wrap:anywhere supplies emergency break opportunities without changing the underlying string.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Text content | Compare before/after wrapping | The exact identifier is unchanged |
| Box width | Measure the paragraph | 180px |
| Overflow | Compare scrollWidth and clientWidth | No horizontal token overflow in the working fixture |
Follow the browser mechanism
Emergency wrapping changes line opportunities, not data. It is useful for a token whose normal breaks are absent. Ellipsis and clipping solve a different presentation task by hiding some visible content. Exact line counts depend on font metrics.
Normal wrapping leaves this token unbroken
The alternative keeps the same width but restores normal wrapping.
<style>body{margin:8px}</style>
<style>.token{width:180px;overflow-wrap:normal}</style><p class="token">workshop_local_example_identifier_without_spaces</p>The supplied token has scrollWidth greater than clientWidth. Adding overflow:hidden would hide its tail rather than make it readable.
Try the repair
If textContent is complete but the tail is clipped, has the visible reading task passed?
Show the worked answer
No. Data retention and visible readability are separate checks; require a route to all characters.
- Check retained text, overflow and multiple rendered lines.
- Do not hardcode a cross-engine line count.