OnlineCBT
Decorate text while keeping information available
Underlines help identify links. Shadows can improve or harm contrast depending on their use. Overflow rules decide what happens when text does not fit, but clipping should not remove essential information without another way to read it.
a {
text-decoration-thickness: 0.1em;
text-underline-offset: 0.2em;
}
.hero-title { text-shadow: 0 2px 4px rgb(0 0 0 / 0.5); }
.single-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.long-content { overflow-wrap: anywhere; }The single-line combination shows an ellipsis when a constrained box cannot contain the text. text-overflow alone does not create a width constraint or prevent wrapping. Give the component a real available width and keep its complete text accessible where needed.
Single-line demonstration
.file-name {
max-width: 18rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Use a deliberately long filename to test it. Inside flex or grid, a child may also need min-width:0 so it can shrink instead of forcing overflow. Do not use an ellipsis on exam instructions or validation errors that users must read in full.
Wrapping choices
overflow-wrap:anywhere allows long unbroken tokens to wrap when necessary. word-break:break-all is more aggressive and can split ordinary words, making paragraphs harder to read. Choose the smallest intervention that solves the actual content problem.
Shadows are not guaranteed contrast
A subtle shadow behind a large title can help separate it from an image, but does not prove sufficient contrast for all backgrounds. Prefer a reliable background or overlay when the photo varies. Avoid blurred shadows on small body text.
Practice
- Test a long URL in a 240px card and enable sensible wrapping.
- Place a truncated filename beside a button in a flex row and inspect min-width behavior.
- Remove link underlines and notice how color-only links become harder to identify; restore a clear distinction.
- Verify that keyboard users can access any control that reveals the full truncated value.
