All repair missions / Mission 06
Fix this page
Make room for a long word
Keep an unbroken project name inside a narrow card.
Your goal
Keep the original project name readable inside a 240px card, at 16px or larger. Wrap it without clipping, scrolling or scaling.
Edit a short HTML fragment or CSS rules. Changes apply when you press Update preview or Check my repair. Scripts and external resources are excluded. Fragment links and the supplied landscape image are supported. Edits stay in this page’s memory; reloading starts again.
Your working preview
Check your repair when you are ready.
Read one possible solution
<article class="text-card"><h2>Project notes</h2><p>MyExtraordinarilyLongUnbrokenProjectNameForTheWeb</p></article>.text-card { width: 240px; padding: 16px; box-sizing: border-box; border: 2px solid #80eee0; overflow-wrap: anywhere; }overflow-wrap: anywhere permits a break within a long token when needed. It preserves the complete text.
Starting code and all hints
<article class="text-card"><h2>Project notes</h2><p>MyExtraordinarilyLongUnbrokenProjectNameForTheWeb</p></article>.text-card { width: 240px; padding: 16px; box-sizing: border-box; border: 2px solid #80eee0; }- The long project name has no natural breaking spaces.
- Changing the container width avoids rather than solves this narrow-layout task.
- Try overflow-wrap: anywhere on .text-card.