CSS Text Layout and Formatting

Intermediate

CSS Text controls how source text becomes formatted text: how white space is handled, how text is wrapped into lines, where breaks are permitted, how lines are aligned and justified, how spacing and indentation affect inline content, and how characters may be transformed for presentation. This lesson is the primary Foxipa owner for the CSS Text processing model. Font selection belongs to CSS Fonts; bidirectional and vertical writing belong to Writing Modes.

Text layout starts after the font is selected

The CSS Text model operates on text that is being formatted with the selected font. Changing the font can change measurements, but this lesson does not teach font matching, font loading, or font features. Those remain with Fonts.

?

White space has a processing model

Source white space is not automatically reproduced one-for-one on screen. CSS white-space behavior controls whether spaces and segment breaks collapse, whether lines may wrap, and whether preserved white space contributes to the formatting. The exact behavior is a text-processing rule, not a generic HTML whitespace rule.

body { font: 1rem system-ui; padding: 1rem; }
p { border: 1px solid currentColor; padding: .5rem; max-width: 18ch; }
.normal { ?: normal; }
.pre { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }

Wrapping is a choice made at available inline space

Normal wrapping forms lines within the available inline space. A change in container width can therefore change line formation without changing the source text. This is why text wrapping should not be debugged as if it were a font-size-only problem.

?

Text wrapping can be constrained by break rules

CSS provides controls for where text may break. `overflow-wrap` allows otherwise unbreakable text to break when necessary; `word-break` changes the set of permitted breaking opportunities; hyphenation can add language-aware break opportunities when enabled and supported.

body { font: 1rem system-ui; padding: 1rem; }
p { width: 18ch; border:1px solid currentColor; padding:.5rem; margin:1rem 0; }
.normal { ?: normal; }
.break { overflow-wrap: break-word; }

Alignment is applied to the lines, not to the font choice

`text-align` controls how inline content is aligned within the line box. `text-align-last` can control the alignment of the last line where applicable. These properties do not choose a font and do not create a layout container.

body { font: 1rem system-ui; padding:1rem; }
.demo { max-width:32ch; }
p { border:1px solid currentColor; padding:.5rem; }
.left { ?:start; }
.center { text-align:center; }
.right { text-align:end; }
.justify { text-align:justify; }

Justification changes spacing to fill a line

When text is justified, the user agent distributes extra inline space according to the justification rules. `text-justify` can select a justification strategy where supported. Justification is distinct from merely centering or aligning a line.

?

Indentation changes the first-line inline position

`text-indent` offsets the start of the first formatted line, and can participate in hanging-indent patterns. It does not add margin to the whole block and does not change the box model.

body { font:1rem system-ui; padding:1rem; }
p { max-width:34ch; border:1px solid currentColor; padding:.5rem; ?:2em; }

Text transformation changes presentation of characters

`text-transform` requests transformations such as uppercase, lowercase, capitalization, or language-sensitive casing behavior. The source text remains distinct from its rendered transformation; the property is a presentation instruction, not an HTML content rewrite.

body { font:1rem system-ui; padding:1rem; }
.upper { ?:uppercase; }
.lower { text-transform:lowercase; }
.cap { text-transform:capitalize; }

Letter and word spacing alter inline advance spacing

`letter-spacing` adjusts spacing between typographic characters, while `word-spacing` adjusts spacing at word-separation opportunities. These are text-layout controls, not font selection and not box margins.

body { font:1rem system-ui; padding:1rem; }
.wide { letter-spacing:.12em; }
.words { ?:.7em; }

Tabs are text, but their advance can be controlled

`tab-size` controls the number of spaces used to represent a tab character when formatting text. It changes the tab advance within the text formatting model rather than changing the element width.

body { font: 1rem ui-monospace, monospace; padding:1rem; }
pre { border:1px solid currentColor; padding:.5rem; }
.small { ?:2; }
.large { tab-size:8; }

Language and writing system affect text processing

Line breaking, hyphenation, and transformation can depend on language and writing-system rules. CSS Text provides controls, but language metadata and the Writing Modes model supply important context. This lesson therefore demonstrates text processing without claiming to own bidirectional or vertical layout.

?

Text wrapping is related to overflow, but the models are different

Text Layout determines how text is broken and formatted into lines. Overflow determines what happens when content exceeds a box or scrollport. A line-breaking rule can reduce overflow, but the overflow module remains the owner of clipping and scrolling.

?

Developing Text Level 4 features need explicit status labels

Text Level 4 separates wrapping mode from wrapping style

The current CSS Text Level 4 draft separates two questions that older shorthand usage can hide: `text-wrap-mode` controls whether unforced soft wrapping is allowed, while `text-wrap-style` controls how the user agent chooses among available wrap opportunities. `text-wrap: balance` remains the convenient shorthand form for the common balanced-heading case.

?

white-space has newer longhands for finer control

The current CSS Text Level 4 draft also decomposes `white-space` into `white-space-collapse`, `text-wrap-mode`, and `white-space-trim`. This gives authors finer control than the traditional shorthand alone. `white-space-collapse` and `white-space-trim` are still developing parts of the draft, so examples here are explicitly status-sensitive rather than presented as the settled CSS core.

?

Ownership boundary: this lesson owns text processing and wrapping controls. Typography owns font selection; Writing Modes owns writing direction and flow axes; Text Decoration owns decoration; Overflow owns clipping and scrolling. The new longhands do not change those ownership boundaries.

CSS Text Level 4 extends the text-processing model with newer controls, including more granular white-space behavior and additional wrapping controls. Foxipa can teach a developing feature when its current W3C specification status is made explicit and the lesson does not present it as universally implemented.

?

A practical text-layout diagnosis

When text looks wrong, first check available inline space and wrapping, then white-space and break rules, then alignment/justification, then spacing and transformation. If the glyphs themselves differ, move to Fonts. If the writing direction or vertical flow is involved, move to Writing Modes. If content is clipped or scrollable, move to Overflow.

?

What this lesson deliberately does not own

Fonts and font matching belong to CSS Fonts. Bidirectional and vertical writing belong to CSS Writing Modes. Box geometry remains with Box Model and Sizing; clipping and scrolling remain with Overflow; HTML semantics remain with HTML.

The result is intentional: a CSS property is not made into a new lesson merely because it is visually adjacent to text. The primary owner follows the specification and processing model that defines the behavior.

Quick review

You should now be able to explain how CSS turns source text into lines, distinguish white-space preservation from wrapping, control break opportunities, align and justify inline content, transform presentation, adjust inline spacing, and identify which neighboring CSS module owns a problem when text behavior crosses a boundary.