Breaking long words
anywhere breaks only the URL, after putting the label on its own line; break-all breaks right where the line ends, even mid-word. The last box hyphenates at syllables, if your browser has an English dictionary.
white-space decides whether spaces and line breaks are kept and whether lines wrap, overflow-wrap, word-break and hyphens decide how long words break, and text-overflow: ellipsis and line-clamp cut text that doesn't fit with a ….
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make .chat-message keep the line breaks and spaces the user typed, wrap long lines, and never let a long link stick out.
Make .filename show a single line, at most 180px wide, ending with … when the name is too long.
Clamp .excerpt to two lines.
Explain it without notes
Compare white-space: normal, nowrap, pre, pre-wrap and pre-line.
What is the difference between overflow-wrap: anywhere and word-break: break-all?
What four things are needed for a single-line ellipsis, and why each?
How do you clamp text to three lines, and what accessibility point should you keep in mind?
Preview
Console
Nothing logged yet.Expected console output
normal overflows: true
anywhere overflows: false
break-all overflows: false