CSS Text Formatting: Properties, Examples and Guide

CSS Text Formatting

CSS text formatting is the process of controlling how written content looks, aligns, wraps, and flows on a web page. It helps developers improve readability, establish a visual hierarchy, highlight important information, and create a consistent design.

With CSS, you can change text color, alignment, spacing, capitalization, indentation, decoration, shadows, wrapping, line breaks, and overflow behavior. Many text-related properties are inherited, so a style applied to a parent element may automatically affect its children.

This guide explains the essential and modern CSS text-formatting properties with clear examples, practical recommendations, and common mistakes.

What Is CSS Text Formatting?

CSS text formatting refers to styling the textual content inside HTML elements. It deals mainly with the appearance and layout of characters, words, lines, and paragraphs.

Here is a simple example:

<p class="introduction">
  CSS helps make website text attractive and readable.
</p>

.introduction {
  color: #263238;
  text-align: center;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

This rule changes the text color, centers the content, increases the space between lines, and slightly adjusts character spacing.

CSS text formatting is related to, but different from, CSS font styling.

• Text properties control alignment, spacing, decoration, transformation, wrapping, and similar behavior.
• Font properties control the typeface, size, weight, style, stretch, and font family.

In real projects, developers normally use both groups together.

Important CSS Text-Formatting Properties

Property	Main purpose
color	Changes the text color
text-align	Aligns inline content
text-align-last	Aligns the final line of a block
text-decoration	Adds underline, overline, or line-through
text-transform	Changes capitalization
text-indent	Indents the first line
letter-spacing	Controls spacing between characters
word-spacing	Controls spacing between words
line-height	Sets the distance between text lines
text-shadow	Adds shadows to text
white-space	Controls spaces, line breaks, and wrapping
overflow-wrap	Breaks long words or URLs when necessary
word-break	Controls where words may break
hyphens	Enables or disables hyphenation
text-overflow	Shows clipped or ellipsis-style overflow
text-wrap	Controls wrapping strategy
writing-mode	Changes horizontal or vertical text flow
direction	Sets left-to-right or right-to-left direction

Text Color

The color property sets the foreground color of text.

p {
  color: navy;
}

CSS supports several color formats:

.example {
  color: blue;
  color: #1565c0;
  color: rgb(21 101 192);
  color: hsl(210 80% 42%);
}

Only the last valid declaration is ultimately applied in this example because later declarations with the same specificity override earlier ones.

Using a CSS custom property

For a consistent color system, store frequently used colors in custom properties:

:root {
  --text-color: #263238;
  --muted-text: #607d8b;
  --link-color: #1565c0;
}

body {
  color: var(--text-color);
}

.article-meta {
  color: var(--muted-text);
}

a {
  color: var(--link-color);
}

Color accessibility

Text must have enough contrast against its background. Light gray text on a white background may look stylish, but it can be difficult to read.

Do not use color as the only way to communicate meaning. For example, an error message should include clear text or another visual indicator instead of relying only on red.

Text Alignment

The text-align property controls the horizontal alignment of inline content inside a block container.

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justified {
  text-align: justify;
}

Common values include:

Value	Effect
left	Aligns text to the left
right	Aligns text to the right
center	Centers inline content
justify	Adjusts spacing so lines fill the available width
start	Aligns content at the logical start
end	Aligns content at the logical end

Prefer logical alignment

For multilingual websites, start and end are often better than left and right.

.article {
  text-align: start;
}

In a left-to-right language such as English, start normally means left. In a right-to-left language such as Arabic, it normally means right.

What text-align actually aligns

Despite its name, text-align affects inline-level content, not only text. It can also align inline images, links, badges, and inline-block elements.

.hero {
  text-align: center;
}

<div class="hero">
  <h2>Learn CSS</h2>
  <img src="css-logo.png" alt="CSS logo">
  <a href="#">Start learning</a>
</div>

Centering a block element

text-align: center does not center the block itself. To center a fixed-width block, use margins:

.content {
  max-width: 700px;
  margin-inline: auto;
}

Justified Text

Justified text creates straight edges on both sides of a text block.

.article {
  text-align: justify;
}

It can appear formal, especially in newspapers and printed documents. However, justification may create large and uneven spaces between words on narrow screens.

For most website body content, text-align: start is easier to read. If justification is required, consider using automatic hyphenation:

.article {
  text-align: justify;
  hyphens: auto;
}

The document should also have the correct language attribute:

<html lang="en">

Browsers use language information when deciding how words may be hyphenated.

Aligning the Last Line

The text-align-last property controls the alignment of the final line of a block, especially when the rest of the paragraph is justified.

.summary {
  text-align: justify;
  text-align-last: center;
}

Common values include:

text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

Text Decoration

The text-decoration shorthand adds decorative lines to text. It combines line type, style, color, and thickness. MDN documents it as a shorthand for four longhand properties.

.important {
  text-decoration: underline;
}

Possible lines include:

.underline {
  text-decoration-line: underline;
}

.overline {
  text-decoration-line: overline;
}

.deleted {
  text-decoration-line: line-through;
}

.multiple {
  text-decoration-line: underline overline;
}

Decoration color

.highlight {
  text-decoration-line: underline;
  text-decoration-color: #e53935;
}

Decoration style

.solid {
  text-decoration-style: solid;
}

.double {
  text-decoration-style: double;
}

.dotted {
  text-decoration-style: dotted;
}

.dashed {
  text-decoration-style: dashed;
}

.wavy {
  text-decoration-style: wavy;
}

Decoration thickness

.heading-link {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}

It can also follow information supplied by the font:

.heading-link {
  text-decoration-thickness: from-font;
}

Text-decoration shorthand

Several decoration settings can be written in one declaration:

.special {
  text-decoration: underline wavy #d32f2f 2px;
}

The order is flexible when the browser can identify the meaning of each value.

Underline offset

text-underline-offset controls the space between the text and its underline.

a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

This can make underlined links cleaner and easier to read.

Skipping descenders

Letters such as g, j, p, and y extend below the baseline. The following property controls whether the underline skips around those parts:

a {
  text-decoration-skip-ink: auto;
}

Do not remove link underlines carelessly

Users commonly identify links through their underlines. If you remove the underline, provide another clear and accessible visual treatment.

a {
  color: #005fcc;
  text-decoration: underline;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 3px;
}

Text Transformation

The text-transform property changes the capitalization displayed by the browser.

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.original {
  text-transform: none;
}

Example:

<p class="uppercase">Learn CSS formatting</p>

The browser displays:

LEARN CSS FORMATTING

The property changes the visual presentation. It does not rewrite the actual HTML text. Copying, searching, or processing the content may still use the original text.

Avoid long paragraphs in uppercase. All-capital text is usually harder to scan and can appear aggressive. Uppercase works better for short labels and navigation items.

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

Text Indentation

The text-indent property adds space at the inline start of the first line of a text block.

.article p {
  text-indent: 2em;
}

It accepts lengths and percentages:

.example-one {
  text-indent: 30px;
}

.example-two {
  text-indent: 5%;
}

A percentage is calculated relative to the inner inline size of the containing block.

Negative indentation

Negative values create an outdent or hanging effect:

.reference {
  padding-inline-start: 2rem;
  text-indent: -2rem;
}

Use negative indentation carefully because text may move outside its container.

Paragraph spacing or indentation?

Printed books often indent paragraphs. Websites commonly separate paragraphs with vertical margins.

Avoid combining a large first-line indent with large paragraph spacing unless it is an intentional design choice.

.article p {
  margin-block: 0 1rem;
  text-indent: 0;
}

Letter Spacing

The letter-spacing property changes the space between characters.

.heading {
  letter-spacing: 0.03em;
}

Positive values increase spacing:

.wide {
  letter-spacing: 0.15em;
}

Negative values reduce spacing:

.tight {
  letter-spacing: -0.02em;
}

The normal value allows the browser and font to use their normal spacing behavior:

p {
  letter-spacing: normal;
}

Relative units such as em are often appropriate because the spacing scales with the text size.

Avoid excessive positive or negative spacing. Large gaps can make words look disconnected, while tight spacing may cause characters to overlap. Letter spacing should rarely be adjusted for ordinary paragraphs.

Word Spacing

The word-spacing property controls the additional space placed between words.

.loose-words {
  word-spacing: 0.25em;
}

Negative values are permitted:

.tight-words {
  word-spacing: -0.05em;
}

Use this property sparingly. Browsers and typefaces already provide carefully designed default spacing.

Line Height

The line-height property sets the height of a line box and therefore controls the vertical distance between lines of text.

body {
  line-height: 1.6;
}

It supports several value types:

.example-one {
  line-height: normal;
}

.example-two {
  line-height: 1.6;
}

.example-three {
  line-height: 24px;
}

.example-four {
  line-height: 160%;
}

Unitless line height

A unitless value is usually the safest choice:

body {
  line-height: 1.6;
}

The computed line height becomes 1.6 times the element’s own font size. When inherited by a child with a different font size, the multiplier is applied to that child’s size.

body {
  font-size: 16px;
  line-height: 1.6;
}

h2 {
  font-size: 32px;
}

The heading inherits the ratio rather than a fixed pixel measurement.

For comfortable body copy, a line height around 1.5 to 1.8 is a useful starting range. The best value depends on the typeface, font size, line length, language, and design.

Text Shadow

The text-shadow property adds one or more shadows behind text.

.title {
  text-shadow: 2px 2px 4px rgb(0 0 0 / 30%);
}

Its basic syntax is:

text-shadow: horizontal-offset vertical-offset blur-radius color;

Example:

h2 {
  text-shadow: 1px 2px 3px #999;
}

• 1px is the horizontal offset.
• 2px is the vertical offset.
• 3px is the blur radius.
• #999 is the shadow color.

Multiple shadows

Separate multiple shadows with commas:

.neon {
  color: white;
  text-shadow:
    0 0 5px #00bcd4,
    0 0 10px #00bcd4,
    0 0 20px #006064;
}

Text shadows should not be required to make low-contrast text readable. Maintain sufficient contrast between the actual text color and its background.

White-Space Handling

The white-space property controls how sequences of spaces, tab characters, source-code line breaks, and automatic wrapping are handled.

.example {
  white-space: normal;
}

Important values include:

Value	Preserves spaces?	Preserves line breaks?	Wraps text?
normal	No	No	Yes
nowrap	No	No	No
pre	Yes	Yes	No
pre-wrap	Yes	Yes	Yes
pre-line	No	Yes	Yes
break-spaces	Yes	Yes	Yes

Normal behavior

p {
  white-space: normal;
}

Repeated spaces are collapsed, source line breaks are treated as spaces, and text wraps normally.

Preventing wrapping

.label {
  white-space: nowrap;
}

This is useful for small labels, dates, menu items, and short controls. It can cause overflow on narrow screens, so it should not be applied blindly to long content.

Preserving formatting

.poem {
  white-space: pre-wrap;
}

pre-wrap preserves source whitespace and line breaks while still allowing long lines to wrap.

Modern Text Wrapping

The text-wrap shorthand controls whether and how text wraps. It includes modern values that can improve typography. Some parts are newer than traditional text properties, so verify support for the browsers your project targets. MDN describes text-wrap as a shorthand for wrapping mode and wrapping style.

Normal wrapping

p {
  text-wrap: wrap;
}

Preventing wrapping

.badge {
  text-wrap: nowrap;
}

Balanced headings

h2 {
  text-wrap: balance;
}

balance attempts to distribute a short heading more evenly across its lines:

An Introduction to Modern
CSS Text Formatting

This often looks better than leaving a single short word on the final line. Browsers generally limit balancing to relatively short blocks, so it is most suitable for headings, captions, and short quotations.

Prettier body-text wrapping

.article-summary {
  text-wrap: pretty;
}

pretty asks the browser to favor higher-quality line breaking. It may reduce awkward final lines, though exact results depend on the browser.

A practical progressive-enhancement pattern is:

h2 {
  text-wrap: wrap;
}

@supports (text-wrap: balance) {
  h2 {
    text-wrap: balance;
  }
}

Breaking Long Words and URLs

A long URL, file name, or unbroken string can extend outside its container.

The overflow-wrap property allows the browser to break such content when necessary.

.article {
  overflow-wrap: anywhere;
}

Common values include:

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

anywhere provides emergency breaking opportunities for content that would otherwise overflow. Unlike break-word, those opportunities also affect intrinsic minimum-size calculations. The older word-wrap name remains an alias, but overflow-wrap is the standard property name. MDN explains the distinction and the history of the alias.

A practical default for user-generated content is:

.comment,
.article-body {
  overflow-wrap: anywhere;
}

Controlling Word Breaks

The word-break property controls where the browser may break words.

.normal {
  word-break: normal;
}

.break-all {
  word-break: break-all;
}

.keep-all {
  word-break: keep-all;
}

normal

Uses the language’s usual line-breaking rules.

break-all

Allows breaks between characters to prevent overflow:

.code-string {
  word-break: break-all;
}

This can make ordinary prose difficult to read because words may break at unnatural positions.

keep-all

Prevents certain breaks in Chinese, Japanese, and Korean text while retaining otherwise normal behavior.

In general, use overflow-wrap: anywhere for emergency overflow protection. Use word-break when you specifically need to alter language-level word-breaking rules.

Automatic Hyphenation

The hyphens property controls whether words may be divided with hyphens at line endings.

.article {
  hyphens: auto;
}

Values include:

hyphens: none;
hyphens: manual;
hyphens: auto;

• none prevents hyphenation.
• manual uses manually supplied break opportunities.
• auto lets the browser apply language-specific hyphenation rules.

Set the correct language for better results:

<p lang="en">Internationalization requires thoughtful typography.</p>

Browser dictionaries and hyphenation support can vary.

Text Overflow and Ellipsis

The text-overflow property indicates that inline text has been clipped.

A one-line ellipsis requires more than one declaration:

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

The result may look like this:

A Complete Introduction to CSS Text Formatt…

text-overflow: ellipsis does not create overflow by itself. The content must be constrained, and overflow normally needs to be hidden. It operates in the inline direction rather than clipping overflowing content at the bottom of a multi-line box. MDN details these requirements.

Accessibility warning

Truncated text may hide important information. Consider providing the complete content elsewhere, such as in the expanded card, accessible name, or detail page. Do not rely solely on the title attribute because it is not consistently accessible on touch devices or to every assistive technology user.

Multi-Line Text Truncation

Multi-line clamping is commonly implemented as follows:

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

This displays approximately three lines and hides the rest.

Use clamping mainly for preview cards. Full article content should remain available after the user opens the item. Check browser compatibility if support for older browsers is required.

Text Direction

The direction property establishes the base direction of text.

.english {
  direction: ltr;
}

.arabic {
  direction: rtl;
}

Values include:

• ltr — left to right
• rtl — right to left

For ordinary HTML content, set direction through semantic HTML whenever possible:

<p dir="rtl" lang="ar">
  ????? ????
</p>

HTML directionality carries meaning beyond visual styling and can affect the handling of bidirectional text.

Avoid reversing text visually as a substitute for correct language direction.

Unicode Bidirectional Control

The unicode-bidi property works with direction to control bidirectional text behavior.

.isolated-rtl {
  direction: rtl;
  unicode-bidi: isolate;
}

This is an advanced property. Incorrect use can make mixed-language content confusing. Prefer HTML elements such as <bdi> and attributes such as dir="auto" when they match the content’s meaning.

<p>User: <bdi>???????</bdi></p>

Vertical Text and Writing Modes

The writing-mode property controls whether lines are laid out horizontally or vertically.

.vertical-title {
  writing-mode: vertical-rl;
}

Common values include:

writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

This property is useful for East Asian typography, book spines, labels, and special editorial designs.

When supporting multiple writing systems, use logical properties such as:

.article {
  margin-inline: auto;
  padding-block: 1rem;
  border-inline-start: 4px solid #1565c0;
}

Logical properties respond naturally to writing direction and writing mode.

Text Emphasis Marks

The text-emphasis shorthand adds emphasis marks around characters. It is particularly relevant to East Asian typography.

.emphasized {
  text-emphasis: filled dot red;
  text-emphasis-position: over right;
}

Related properties include:

text-emphasis-style: filled dot;
text-emphasis-color: red;
text-emphasis-position: over right;

This is different from underlining and should be used according to the conventions of the language being displayed.

Tab Size

The tab-size property controls the width of tab characters.

pre,
code {
  tab-size: 4;
}

It is particularly helpful in code blocks and preformatted content.

.compact-code {
  tab-size: 2;
}

Hanging Punctuation

The hanging-punctuation property allows some punctuation marks to hang outside the start or end edge of a line.

blockquote {
  hanging-punctuation: first last;
}

This can create a more polished editorial appearance. Browser support and the exact behavior may vary, so treat it as a typographic enhancement rather than an essential layout feature.

Inheritance in CSS Text Formatting

Many text properties are inherited. A child element may receive its parent’s computed value without requiring another declaration.

article {
  color: #263238;
  line-height: 1.7;
  text-align: start;
}

Paragraphs, lists, links, and many other descendants inherit these values unless another rule overrides them.

Common inherited text-related properties include:

• color
• text-align
• text-transform
• text-indent
• letter-spacing
• word-spacing
• line-height
• white-space
• overflow-wrap
• word-break
• direction

Not every property is inherited in the same way. For example, text-decoration is not inherited as a computed property, but a decoration placed on an ancestor is drawn across its descendant text. A child generally cannot remove an ancestor’s underline simply by declaring text-decoration: none.

Global CSS Values

Most CSS text properties accept global values:

.example {
  color: inherit;
  text-align: initial;
  text-transform: unset;
  text-decoration: revert;
  letter-spacing: revert-layer;
}

Value	Meaning
inherit	Uses the parent’s computed value
initial	Uses the property’s initial value
unset	Acts as inherit for inherited properties and initial otherwise
revert	Rolls back to an earlier origin in the cascade
revert-layer	Rolls back styles from the current cascade layer

A Complete Readable Article Style

The following example creates a practical typographic foundation:

:root {
  --text-main: #263238;
  --text-muted: #607d8b;
  --link: #0759b8;
  --content-width: 70ch;
}

body {
  margin: 0;
  color: var(--text-main);
  background-color: #fff;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

article {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 1.25rem;
  overflow-wrap: anywhere;
}

article h2,
article h3 {
  line-height: 1.25;
  text-wrap: balance;
}

article p {
  margin-block: 0 1.1em;
}

article a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

article a:hover {
  text-decoration-thickness: 0.16em;
}

article blockquote {
  margin-inline: 0;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid #90a4ae;
  color: var(--text-muted);
}

article code {
  white-space: break-spaces;
}

The ch unit helps limit line length according to the approximate width of the 0 character. It is useful for readable content widths, although it does not guarantee an exact number of characters per line.

Responsive Text Formatting

Text should remain readable across phones, tablets, and desktops. Avoid fixed font sizes that become too small or extremely large.

The clamp() function can create fluid sizing:

.article-title {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  text-wrap: balance;
}

This means:

• The minimum size is 2rem.
• The preferred fluid size is 5vw.
• The maximum size is 4rem.

Body text can also scale gently:

body {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
}

Test the result at narrow and wide viewport sizes. Mathematical responsiveness does not automatically guarantee readable typography.

Accessibility Best Practices

Good CSS text formatting should improve understanding rather than merely decorate the page.

Maintain readable contrast

Choose text and background colors with adequate contrast. Check normal text, large text, links, placeholders, disabled controls, and hover states.

Avoid extremely small text

Do not force users to zoom just to read ordinary content. A base size near the browser default of 16px is a sensible starting point for many interfaces.

Do not prevent text resizing

Avoid layouts that break when the user zooms or increases the default font size. Prefer flexible dimensions, relative units, and wrapping content.

Use comfortable line spacing

Crowded lines are difficult to track. Unitless line-height values around 1.5 or higher are often suitable for paragraphs.

Limit line length

Very long lines make it difficult for readers to locate the beginning of the next line.

article {
  max-width: 65ch;
}

A range of roughly 45–75 characters per line is often used as a practical typographic guideline, but the right measure depends on the typeface, language, audience, and layout.

Do not justify narrow columns

Justified text in a narrow container can produce distracting rivers of whitespace. Use start alignment for small screens unless the design has been carefully tested.

Preserve link recognition

Links should be visually distinguishable from surrounding text without relying entirely on color.

Respect user settings

Use relative units such as rem and em where appropriate. Test the page at 200% zoom and with increased text spacing.

Do not encode meaning only through visual style

Uppercase, decoration, color, or spacing should not replace meaningful HTML. Use <strong>, <em>, headings, lists, and other semantic elements when their meaning applies.

Common CSS Text-Formatting Mistakes

Using text-align to center a block

Incorrect:

.card {
  width: 400px;
  text-align: center;
}

This centers the content inside the card, not the card itself.

Better:

.card {
  width: min(100%, 400px);
  margin-inline: auto;
  text-align: center;
}

Expecting ellipsis from one property

Incomplete:

.title {
  text-overflow: ellipsis;
}

Complete single-line version:

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

Using fixed line height

Potentially problematic:

body {
  line-height: 20px;
}

More flexible:

body {
  line-height: 1.6;
}

Breaking every word unnecessarily

article {
  word-break: break-all;
}

This can damage readability. For general overflow protection, prefer:

article {
  overflow-wrap: anywhere;
}

Applying uppercase to long content

article {
  text-transform: uppercase;
}

Long uppercase passages are harder to read. Reserve this treatment for short labels.

Removing all link styling

a {
  color: inherit;
  text-decoration: none;
}

This can make links impossible to recognize. Maintain a visible link treatment and a clear keyboard focus state.

Using excessive shadows

Heavy shadows can blur characters and reduce readability. Use subtle shadows only when they support the design.

Frequently Asked Questions

What is text formatting in CSS?

Text formatting in CSS means changing the presentation and flow of textual content. It includes color, alignment, spacing, indentation, capitalization, decoration, wrapping, shadows, line breaking, and overflow management.

What is the difference between font styling and text formatting?

Font styling controls the typeface, font size, weight, style, and related font features. Text formatting controls how text is aligned, spaced, decorated, transformed, wrapped, and positioned within lines.

How do I center text with CSS?

Use:

.element {
  text-align: center;
}

This centers inline content inside the element.

How do I center an element itself?

Use an appropriate layout method. For a block with a limited width:

.element {
  max-width: 600px;
  margin-inline: auto;
}

Flexbox and Grid can also center items.

How do I underline text?

.element {
  text-decoration: underline;
}

For more control:

.element {
  text-decoration: underline solid #1565c0 2px;
  text-underline-offset: 0.2em;
}

How do I convert text to uppercase?

.element {
  text-transform: uppercase;
}

This changes the visual presentation, not necessarily the original source text.

How do I add space between letters?

.element {
  letter-spacing: 0.05em;
}

How do I prevent text from overflowing?

For long words and URLs:

.element {
  overflow-wrap: anywhere;
}

For one-line truncation:

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

How do I preserve line breaks and spaces?

Use:

.element {
  white-space: pre-wrap;
}

Is word-wrap still valid?

Browsers continue to support word-wrap as an alias. However, overflow-wrap is the standard name and is generally preferred in new CSS.

What is the best line height for paragraphs?

There is no universal value, but 1.5 to 1.8 is a useful starting range for ordinary body content. Test it with the chosen font, size, width, language, and target audience.

Conclusion

CSS text formatting is essential for creating readable, accessible, and visually balanced websites. Properties such as color, text-align, line-height, letter-spacing, text-decoration, and white-space handle everyday typography. Properties such as text-wrap, overflow-wrap, hyphens, and writing-mode provide more advanced control over responsive and multilingual content.

Good text formatting should make content easier to understand. Use comfortable line spacing, manageable line lengths, clear link treatments, adequate contrast, and flexible responsive values. Decorative effects can strengthen a design, but readability and accessibility should remain the highest priorities.

The modern CSS text model covers alignment, justification, line breaking, white-space processing, transformations, and international text behavior in considerable detail. For formal definitions and newer features, consult the current W3C CSS Text Module and W3C CSS Text Decoration Module.