Sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

auto | loose | normal | strict | anywhere

auto

Break text using the default line break rule.

loose

Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.

normal

Break text using the most common line break rule.

strict

Break text using the most stringent line break rule.

sets the spacing behavior between text characters.

normal | <length> 

normal

The normal letter spacing for the current font. Unlike a value of 0, this keyword allows the user agent to alter the space between characters in order to justify text.

<length>

Specifies extra inter-character space in addition to the default space between characters. Values can be negative.

• This space is in addition to the space already between characters.
• Browsers shouldn't further increase or decrease inter-character space to justify text.

“I Have a Dream” speech: the oft forgotten part

There are those who are asking the devotees of civil rights, "When will you be satisfied?" We can never be satisfied as long as the Negro is the victim of the unspeakable horrors of police brutality. We can never be satisfied as long as our bodies, heavy with the fatigue of travel, cannot gain lodging in the motels of the highways and the hotels of the cities. We cannot be satisfied as long as the negro's basic mobility is from a smaller ghetto to a larger one. We can never be satisfied as long as our children are stripped of their self-hood and robbed of their dignity by signs stating: "For Whites Only." We cannot be satisfied as long as a Negro in Mississippi cannot vote and a Negro in New York believes he has nothing for which to vote. No, no, we are not satisfied, and we will not be satisfied until "justice rolls down like waters, and righteousness like a mighty stream." -MLK

Specifies how words should be hyphenated when text wraps across multiple lines.

none | manual | auto

none

Prevent hyphenation entirely

manual

Words are broken for line-wrapping only where characters, like hyphens and ­, suggest line break opportunities.

auto

Browser will automatically break words at appropriate hyphenation points, following whatever rules it chooses to use with preference for suggested line break opportunities. Specify the language!

Note: Words will be broken by <wbr> but no hyphen will be added.

specifies whether a punctuation mark should hang at the start or end of a line of text.

none | [ first || [ force-end | allow-end ] || last ] 

Hanging punctuation - brackets, quotes, comma, stops - may be placed outside the line box. Only works in Safari.

hanging-punctuation: last;
hanging-punctuation: last allow-end;
hanging-punctuation: first force-end last;

none

Default. No character hangs.

first

An opening bracket or quote at the start of the first formatted line of an element hangs.

last

A closing bracket or quote at the end of the last formatted line of an element hangs.

force-end

A stop or comma at the end of a line hangs.

allow-end

A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

Sets how white space inside an element is handled.

normal | pre | nowrap | pre-wrap | break-spaces | pre-line

normal

Default, except for in <pre>. White space is collapsed, newlines are white space, and lines wrap.

nowrap

Collapses white space like normal, but doesn't text wrap.

pre

White space and line breaks are preserved.

pre-wrap

White space are preserved. Lines are broken as necessary to fill line boxes.

pre-line

like pre-wrap, but white space is collapsed.

break-spaces

The behavior is identical to that of pre-wrap, except whlie white space is preserved even at line end, it will wrap when needed within those white spaces.

Killing in the name of Some of those that were forces are the same that burn crosses (4x) Killing in the name of, killing in the name of And now you do what they told ya (12x) Those who died are justified Wearing the badge, they're the chosen whites You justify those that died Wearing the badge, they're the chosen whites Those who died are justified Wearing the badge, they're the chosen whites You justify those that died Some of those that burn crosses are the same that hold office (4x) Killing in the name of, killing in the name of And now you do what they told ya (4x) And now you do what they told ya, now you're under control (6x) Those who died are justified Wearing the badge, they're the chosen whites You justify those that died Wearing the badge, they're the chosen whites Those who died are justified Wearing the badge, they're the chosen whites You justify those that died Wearing the badge, they're the chosen whites Come on Fuck you, I won't do what you tell me (14x) Motherfucker

- Rage Against the Machine

Sets the length of space between words and between tags.

normal | <length>

Always consider legibility, especially for those with cognitive disabilities, when formatting text.

”Pretty women wonder where my secret lies. I'm not cute or built to suit a fashion model's size But when I start to tell them, They think I'm telling lies. I say, It's in the reach of my arms The span of my hips, The stride of my step, The curl of my lips. I'm a woman Phenomenally. Phenomenal woman, That's me.”

― Maya Angelou

Sets whether line breaks appear wherever the text would otherwise overflow its content box.

normal | keep-all | break-all | break-word 

normal

Use the default line break rule.

break-all

To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).

keep-all

Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.

break-word

Has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

Note: In contrast to word-break: break-word and overflow-wrap: break-word (see overflow-wrap), word-break: break-all will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

Specifies how to capitalize an element's text.

capitalize | uppercase | lowercase | none | full-width | full-size-kana;

It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.

capitalize

Converts only the first letter of each word to uppercase. Punctuation marks or symbols at the beginning of a word should be ignored.

uppercase

Converts ALL characters to uppercase.

lowercase

Should converts all characters to lowercase.

none

Is a keyword that prevents the case of all characters from being changed.

full-width

Forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to b aligned in the usual East Asian scripts (like Chinese or Japanese).

full-size-kana

Generally used for <ruby> annotation text: converts small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.

Notes:

• Takes into account language-specific case mapping rules
• First unicode letter or number. Initial punctuations of words are ignored
• uppercase can be hard to read.

Sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.

 clip | ellipsis | <string> 

If one value, it's the end of the line. In FF, when 2 values set, the first is start, the second is end

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

white-space and overflow must be set for text-overflow to have any effect

clip

Default. Truncates text at the limit of the content area.

ellipsis

Display an ellipsis ('…', U+2026 Horizontal Ellipsis) to represent clipped text.

<string>

Displays the provided string to represent clipped text.

Clipping characters are displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the clipping characters, they will be clipped.

Sets the kind of decoration that is used on text in an element, such as an underline, line-thru, overline, or all three.

none | underline | overline | line-through | blink 

Either none or any combination of the other four values

none

Produces no text decoration.

underline

Each line of text has a decorative line beneath it.

overline

Each line of text has a decorative line above it.

line-through

Each line of text has a decorative line going through its middle.

blink

The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. This value is deprecated in favor of CSS animations.

Sets the style of the lines specified by text-decoration-line. The style applies to all lines that are set with text-decoration-line.

solid | double | dotted | dashed | wavy

solid

Draws a single line.

double

Draws a double line.

dotted

Draws a dotted line.

dashed

Draws a dashed line.

wavy

Draws a wavy line.

Sets the color of decorations added to text by text-decoration-line.

currentColor | <color>

solid

double

dotted

dashed

wavy

Sets the thickness of the text-decoration-line(s).

currentColor | <color>

solid

double

dotted

dashed

wavy

Currently behind a flag in FF. May change names. That's being decided this week.

Shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.

Guilt is not a response to anger; it is a response to one’s own actions or lack of action. If it leads to change then it can be useful, since it is then no longer guilt but the beginning of knowledge. Yet all too often, guilt is just another name for impotence, for defensiveness destructive of communication; it becomes a device to protect ignorance and the continuation of things the way they are, the ultimate protection for changelessness.

― Audre Lorde

Specifies the position of the underline which is set using the text-decoration property's underline value.

auto

The browser will use its own algorithm to place the line at or under the alphabetic baseline.

under

Forces the line to be set below the alphabetic baseline, at a position where it won't cross any descenders. This is useful for ensuring legibility with chemical and mathematical formulas, which make a large use of subscripts.

left

In vertical writing-modes, this keyword forces the line to be placed on the left side of the text. In horizontal writing-modes, it is a synonym of under.

right

In vertical writing-modes, this keyword forces the line to be placed on the right side of the text. In horizontal writing-modes, it is a synonym of under.

Sets the offset distance for any underline.

text-underline-offset: 0.3em;

Only works on underline. Not other positions.

auto

The browser chooses the appropriate offset for underlines.

from-font

If the font file includes information about a preferred offset, use that value. If the font file doesn't, as if set to auto with the browser choosing the appropriate offset

<length>

Specifies the offset of underlines as a <length>, overriding the font file suggestion or the browser default. It is recommended to use em units so the offset scales with the font size.

Text-underline-offset is not part of the text-decoration shorthand. While an element can have multiple text decoration lines, as the name suggests, text-underline-offset only impacts underlining, and not other lines set by the text-decoration-line property, like overline or line-through.

Challenging power structures from the inside, working the cracks within the system, however, requires learning to speak multiple languages of power convincingly.

― Patricia Hill Collins

Sets what parts of an element’s content any text decoration must skip over. It controls text decoration lines drawn by the element and its ancestors.

none | objects | spaces | leading-spaces | 
  trailing-spaces | edges | box-decoration

none

Nothing is skipped.

objects

The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.

spaces

All letter spacing and word spacing

leading-spaces

The same as spaces, except that only leading spaces are skipped.

trailing-spaces

The same as spaces, except that only trailing spaces are skipped.

edges

The start and end of the text decoration is inset slightly from the content edge of the decorating box so adjacent elements receive separate underlines.

box-decoration

Inherited text decoration is skipped over the box's margin, border, and padding areas.

text-decoration-skip: edges;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.

none | auto

none

Nothing is skipped.

auto

default. Underlines and overlines are only drawn where they do not touch or closely approach a glyph.

text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;

Applies emphasis marks to text (except spaces and control characters)

text-emphasis-style

Sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand.

text-emphasis-color

Sets the color of emphasis marks.

text-emphasis: open triangle #D55;

• inherited (unlike text-decoration), so you can change descendant marks
• applied to parts of element (unlike text-decoration)
• size is about half of font, so may effect line height.
• doesn't reset the value of text-emphasis-position.

Sets the appearance of emphasis marks

none | <string> 
filled | open | dot | circle | double-circle | triangle | sesame 

none

No emphasis marks.

filled

The shape is filled with solid color. If neither filled nor open is present, this is the default.

open

The shape is hollow.

dot

Display small circles as marks. The filled dot is '•' (U+2022), and the open dot is '◦' (U+25E6).

circle

Display large circles as marks. The filled circle is '●' (U+25CF), and the open circle is '○' (U+25CB).

double-circle

Display double circles as marks. The filled double-circle is '◉' (U+25C9), and the open double-circle is '◎' (U+25CE).

triangle

Display triangles as marks. The filled triangle is '▲' (U+25B2), and the open triangle is '△' (U+25B3).

sesame

Display sesames as marks. The filled sesame is '﹅' (U+FE45), and the open sesame is '﹆' (U+FE46).

<string>

Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

Caring for myself is not self-indulgence, it is self-preservation, and that is an act of political warfare.

― Audre Lorde

Sets where emphasis marks are drawn. If there isn't enough room for emphasis marks, the line height is increased.

[ over | under ] && [ right | left ]

over

Draw marks over the text in horizontal writing mode.

under

Draw marks under the text in horizontal writing mode.

right

Draws marks to the right of the text in vertical writing mode.

left

Draw marks to the left of the text in vertical writing mode.

text-emphasis: open sesame blue;
text-emphasis-position: under right;

Caring for myself is not self-indulgence, it is self-preservation, and that is an act of political warfare.

― Audre Lorde

Adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

text-shadow: var(--colorpop) 3px 3px 5px;

<color>

Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.

<offset-x> <offset-y>

Required. These <length> values specify the shadow's distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius>.

<blur-radius>

Optional <length> value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.

Unlike box-shadow, the shadow is behind the text too.

Challenging power structures from the inside, working the cracks within the system, however, requires learning to speak multiple languages of power convincingly

― Patricia Hill Collins

Open the I have a Dream

Improve the legibility. Consider:

• line height
• font face
• justification
• spacing
• Make the blockquotes and headings stand out.

Download

• CSS Text Decoration Module Level 4
• CSS Text Decoration Module Level 3
• CSS Fonts Module Level 3
• CSS Text Module Level 4
• CSS Text Module Level 3
• CSS Level 1