white-space values compared
Only the values that never wrap (nowrap, pre) stick out of the box. Look at which ones keep the extra spaces and the source line break.
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: false
nowrap overflows: true
pre overflows: true
pre-wrap overflows: false
pre-line overflows: false