Tab-size controls the rendered width of tab characters in preserved whitespace. It does not convert tabs to spaces in the source text or change what a user copies.
Make this comfortable
CSS tab-size: render source indentation without rewriting code
When to use it
An incident report includes a short diagnostic excerpt supplied by an engineer. If the excerpt contains tab characters, the browser's default width can push a line off-screen. Set a smaller tab size on the preformatted code region and allow horizontal scrolling rather than wrapping tokens unpredictably. The sample leaves surrounding prose untouched. Test actual tab characters, spaces, a very long line, and mobile width. Do not assume the displayed indentation proves the pasted source was formatted consistently; mixed spaces and tabs can still align badly. If the code is executable, syntax and security checks belong elsewhere. The lesson body should label the excerpt clearly and avoid using indentation as the only cue for meaning.
.diagnostic-excerpt { tab-size: 3; white-space: pre; overflow-x: auto; max-inline-size: 100%; }Cost and verification
Rendering a different tab width is cheap. The maintenance cost is mismatch between what readers see and what they paste into an editor with another tab setting. State the source convention when it matters, and preserve the raw text for copying. Horizontal scrolling can hide a line's end, so keep a visible scroll affordance and inspect keyboard access. Do not use CSS to disguise malformed indentation in an official record. A code viewer with line numbers may need separate semantics and controls, not a larger tab-size value.
Common Mistakes
- Do not assume tab-size changes copied source text.
- Do not hide the end of a long line without a scroll route.
- Do not use visual indentation to conceal mixed tabs and spaces.
Connected lessons
css
reference
web