Text

text-align

How the lines of a block are aligned within it in the inline direction. start and end follow the text direction, so they flip for right-to-left languages; left and right do not.

text-align aligns inline content, not the block itself; to centre a block, use margin-inline: auto.

text-align-last

The alignment of the last line of a block, and of any line just before a forced line break. auto follows text-align, except that justified text ends with a line aligned to the start.

text-justify

How justified text is stretched to fill the line. inter-word widens only the spaces between words, which suits languages such as English; inter-character spaces out every character, which suits Chinese and Japanese; none turns justification off.

It only has an effect where text-align or text-align-last is justify. auto lets the browser choose a method suited to the language.

text-indent

Indents the first line of a block. A negative value pulls the first line out past the edge, which with matching padding makes a hanging indent.

hanging inverts the indent so every line except the first is indented. each-line also indents each line that follows a forced line break, not just the first line of the block.

p + p { text-indent: 1.5em; }

hanging-punctuation

Lets punctuation hang outside the line box, so the edge of the text lines up with the letters rather than the quotation marks. first hangs an opening mark at the start of the first line, last a closing mark at the end of the last line, and force-end or allow-end a stop or comma at the end of a line.

Safari supported it from version 10, but did not hang straight quotation marks until 26.5.

letter-spacing

Extra space added between characters; negative values tighten. Use em so the spacing scales with the font size. Non-zero spacing turns off the font's optional ligatures.

.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; }

word-spacing

Extra space added to each word separator, on top of the font's own space width. Negative values tighten.

tab-size

The width of a tab character in preserved white space, as a number of space widths or as a length.

pre { tab-size: 4; }

text-autospace

Adds a small gap where Chinese or Japanese ideographs meet Latin letters or digits, so mixed-script text does not need hand-typed spaces. no-autospace turns it off.

<autospace> is no-autospace, or a combination of ideograph-alpha (between ideographs and letters) and ideograph-numeric (between ideographs and digits), with further keywords for punctuation.

text-spacing-trim

Controls the blank space built into full-width Chinese and Japanese punctuation such as brackets and commas. normal trims it in places such as between two adjacent punctuation marks; space-all keeps the full width everywhere.

<spacing-trim> is one of space-all, normal, space-first, trim-start, trim-both or trim-all.

white-space

Shorthand for white-space-collapse and text-wrap-mode: whether spaces and line breaks in the source are kept, and whether lines wrap. The single keywords below are the long-standing way to set both.

white-space-collapse

Whether runs of spaces, tabs and line breaks in the source collapse to a single space. preserve keeps them all; preserve-breaks keeps line breaks but collapses spaces; break-spaces keeps them and lets the line wrap after any space, so trailing spaces take up room.

text-wrap

Shorthand for text-wrap-mode and text-wrap-style: whether lines wrap, and how the browser chooses where to break them.

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

text-wrap-mode

Whether text wraps onto new lines at all. nowrap keeps each line whole, letting it overflow its container.

text-wrap-style

How the browser chooses line breaks in wrapping text.

overflow-wrap

Whether a word too long for its line may be broken at an arbitrary point to stop it overflowing, as long URLs often need. Its older name, word-wrap, still works as an alias.

Both break-word and anywhere break a word only when there is no other way to fit it. The difference is sizing: anywhere counts those break points when working out the box's min-content width, so it also lets a shrink-to-fit box such as a flex item or table cell get narrower.

word-break

Where lines may break within words. Unlike overflow-wrap, it changes the break rules for all text, not just words that would overflow.

line-break

How strictly the line-breaking rules are applied, mainly for Chinese and Japanese, such as whether a line may begin with small kana or certain punctuation. anywhere allows a break between any two characters, even around punctuation.

hyphens

Whether words may be hyphenated at the end of a line. manual breaks only where the text contains a soft hyphen (­) or a real hyphen; auto also lets the browser hyphenate using a dictionary for the element's language; none never hyphenates.

<html lang="en-GB">
article p { hyphens: auto; }

hyphenate-character

The string shown at the end of a line where a word is hyphenated. auto uses the right character for the language.

hyphenate-limit-chars

Limits automatic hyphenation by word length. Up to three values give the shortest word that may be hyphenated, the fewest characters before the break and the fewest after it.

hyphenate-limit-chars: 8 3 3;

text-transform

Changes the case or form of characters for display, without changing the text in the document.

text-overflow

What is shown where inline content is clipped at the end of a line: clip cuts it off, ellipsis shows "…". It only applies when the line actually overflows a box whose overflow is not visible.

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

text-fit

Scales text up or down so that it fills the width of its container. grow enlarges text that is too narrow and shrink reduces text that is too wide; consistent applies one scale to every line, while per-line scales each line separately.

text-decoration

Shorthand for the line, thickness, style and colour of underlines, overlines and strike-throughs.

A decoration is drawn across all the text inside the element, including its descendants, and a descendant cannot remove it. Setting text-decoration: none on a child only stops the child adding its own. The early support versions cover the line keywords alone; the other parts arrived with each longhand.

a {
  text-decoration: underline 0.08em;
  text-underline-offset: 0.2em;
}

text-decoration-line

Which lines are drawn: underline, overline, line-through, or a combination. blink is accepted but browsers do not make text blink.

text-decoration-style

The style of the decoration lines: a single solid line, a double line, dotted, dashed or wavy.

text-decoration-color

The colour of the decoration lines. By default they match the text colour.

text-decoration-thickness

How thick the decoration lines are. from-font uses the thickness the font recommends; auto lets the browser choose. Lengths in em keep the line in proportion to the text.

text-decoration-skip-ink

Whether underlines and overlines break where they would cross a glyph, such as the descenders of g, j and y. none draws a continuous line through them.

text-decoration-skip-spaces

Whether decoration lines are drawn under spaces. The initial start end leaves out spaces at the start and end of the line; all skips every space; none draws under them all.

text-decoration-skip Deprecated

An older shorthand for which parts of the content decoration lines skip. Use text-decoration-skip-ink to control skipping around glyphs instead.

text-decoration-inset

Shortens or lengthens the decoration line at its start and end. Positive values pull the ends in; negative values extend the line past the text. One value sets both ends; two set start then end.

text-underline-offset

Moves the underline away from its default position: positive values move it further from the text. Unlike the decoration longhands, it is inherited, so it can be set once on a container.

text-underline-position

Where the underline sits. from-font uses the position the font recommends; under puts it below the descenders, which keeps it clear of subscripts in chemical and mathematical text. left and right choose the side in vertical text.

text-shadow

One or more shadows drawn behind the text, each with a horizontal and vertical offset, an optional blur radius and a colour. The first shadow in the list is drawn on top.

text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);

text-emphasis

Shorthand for text-emphasis-style and text-emphasis-color: small marks drawn beside each character to emphasise it, the usual way to stress text in Chinese and Japanese. Their position is set separately with text-emphasis-position.

em:lang(ja) { font-style: normal; text-emphasis: filled sesame; }

text-emphasis-style

The shape of the emphasis marks: dot, circle, double-circle, triangle or sesame, each filled or open, or any single character given as a string.

text-emphasis-color

The colour of the emphasis marks. By default they match the text colour.

text-emphasis-position

Which side of the text the emphasis marks go on: over or under in horizontal text, and right or left in vertical text. Japanese usually places them over; Chinese usually under.

line-height

The height of each line box, which spaces the lines of text. On a block it sets the minimum height of its lines; on an inline box it sets the height that box contributes.

Prefer a unitless number. It is inherited as a factor, so each descendant recalculates it from its own font size; a length or percentage is inherited as a fixed length and can be too tight for larger text.

body { line-height: 1.5; }

vertical-align

Shorthand for alignment-baseline, baseline-shift and baseline-source: how an inline-level box sits within its line, or how a table cell's content is aligned within the cell.

In a table cell, top, middle and bottom align the cell's content vertically. It has no effect on block-level boxes; use flexbox or grid alignment for those.

dominant-baseline

Which baseline a box uses to align the text and inline boxes inside it, such as alphabetic for Latin text, ideographic for Chinese and Japanese, hanging for scripts like Devanagari, or central. It is mostly used on SVG text.

<baseline-metric> is one of text-bottom, alphabetic, ideographic, middle, central, mathematical, hanging or text-top.

alignment-baseline

Which of a box's baselines is lined up with the matching baseline of its parent. Like dominant-baseline, it is mostly used on SVG text; in HTML, vertical-align sets it.

baseline-shift

Raises or lowers a box from its aligned position. Positive lengths raise it; sub and super move it to the subscript or superscript position.

baseline-source

Whether an inline-level box with several lines aligns by its first or last line's baseline. auto uses the last baseline for inline blocks and the first for everything else, which is why a multi-line inline block sits by its bottom line.

text-box

Shorthand for text-box-trim and text-box-edge: trims the space a font reserves above and below its letters, so that text can be aligned to its cap height or baseline instead of to the edges of the line box.

.button { text-box: trim-both cap alphabetic; }

text-box-trim

Which sides are trimmed: trim-start trims above the first line, trim-end below the last line, and trim-both both.

text-box-edge

Which font metrics the trim cuts to. The first keyword is the top edge (text, cap, ex, ideographic or ideographic-ink) and the second the bottom edge (text, alphabetic, ideographic or ideographic-ink).

A single keyword such as text or ideographic sets both edges.

initial-letter

Makes a drop cap or raised initial. The first number is the letter's size in lines of text; the optional second is how many lines it sinks into the paragraph.

p:first-of-type::first-letter { initial-letter: 3; }

Safari supports it only with the -webkit- prefix.

ruby-position

Where ruby annotations (the small reading aids set beside East Asian text) are placed: over puts them above horizontal text, under below it. alternate, the initial value, places a single annotation over and alternates sides when there are two levels.

rt { ruby-position: under; }

ruby-align

How ruby text is spread across its base, or a base across its annotation, when one is shorter than the other: at the start, in the center, or with the spare space distributed by space-between or space-around.

ruby-overhang

Whether a ruby annotation wider than its base may hang over the neighbouring text instead of pushing it apart.

math-depth

The nesting depth of an element within a MathML formula, which font-size: math uses to make scripts and nested fractions progressively smaller. auto-add adds one when the parent's math-style is compact; add() adds a given amount; an integer sets the depth outright.

The browser's MathML style sheet already sets it on scripts, so you rarely need to set it yourself.

math-shift

How high superscripts are raised in MathML. compact uses a smaller shift, as in denominators and under radicals, where space is tight.

math-style

Whether a MathML formula is laid out in display style (normal), with full-size operators and limits above and below, or in the more compact inline style (compact) that fits within a line of text.

text-size-adjust

Controls the automatic enlargement of text that some mobile browsers apply to pages not designed for small screens. none turns it off; a percentage sets the enlargement factor.

Safari on iOS supports it with the -webkit- prefix. A page with a proper <meta name="viewport"> tag is not enlarged in the first place.

-webkit-line-clamp

Cuts a block's content off after a given number of lines and puts an ellipsis at the end of the last one. It only works together with display: -webkit-box and -webkit-box-orient: vertical, and usually overflow: hidden.

.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

-webkit-text-fill-color

The colour used to fill the glyphs of text, overriding color for the fill only. Setting it to transparent together with background-clip: text lets a gradient or image show through the letters.

h1 {
  background: linear-gradient(90deg, teal, purple);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

-webkit-text-stroke

Shorthand for -webkit-text-stroke-width and -webkit-text-stroke-color: an outline drawn along the edges of each glyph.

The stroke is centred on the glyph outline, so a thick stroke eats into the letter's fill as well as growing outwards.

-webkit-text-stroke: 1px currentcolor;
-webkit-text-fill-color: transparent;

-webkit-text-stroke-width

The width of the outline drawn around text. <line-width> is a non-negative length or one of thin, medium and thick.

-webkit-text-stroke-color

The colour of the outline drawn around text. By default it matches the text colour.