One-line ellipsis and a three-line clamp
scrollWidth > clientWidth is the usual JavaScript test for "is this text truncated?", for example to show a tooltip only when needed.
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
title is cut: true
visible lines: 3
full text still in the DOM: true