CSS Line-Height, Measure, Hyphenation, and Wrapping

Readable text depends on more than font choice. In CSS, line-height, text width, hyphenation, and wrapping rules work together to control how easily people can scan and read content on different screen sizes.

Quick answer: Use a comfortable line-height, keep body text to a readable width, allow normal wrapping, and enable hyphenation only where it improves layout. These settings reduce cramped lines, overflow, and awkward breaks.

Difficulty: Beginner

You'll understand this better if you know: basic CSS selectors, the box model, and how fonts and widths affect layout.

1. What Is Line-Height, Measure, Hyphenation, and Wrapping?

These are typography controls that shape how text flows in a layout. Each one affects readability in a different way:

line-height sets the vertical space between lines of text.
Measure is the length of a line of text, usually controlled by the container width.
Hyphenation allows long words to break with a hyphen when needed.
Wrapping decides when text should move to the next line instead of overflowing.

Together, they help text feel balanced instead of cramped, stretched, or broken in awkward places.

2. Why These Text Layout Settings Matter

Good text layout makes content easier to read for longer periods. That matters for articles, documentation, dashboards, product pages, forms, and any UI that contains real language instead of short labels.

Without these settings, text can become difficult to scan because lines are too long, too tight, or forced to overflow. On small screens, a paragraph that looks fine on desktop can become uncomfortable if the line width is too wide or long words do not wrap properly.

3. Basic Syntax or Core Idea

Most of the time, you apply these properties to a text container such as a paragraph, article body, or card.

Line height

The line-height property controls spacing between lines. A unitless value is usually the safest choice for body text because it scales with the font size.

p {
  font-size: 1rem;
  line-height: 1.6;
}

Here, the text size is one rem and the lines are spaced at 1.6 times that size.

Measure through container width

CSS does not have a property literally called measure. In practice, measure means the width of the text block. A common approach is to limit the content width with max-width.

.content {
  max-width: 65ch;
}

The unit ch roughly matches the width of the digit zero in the current font, which makes it useful for setting comfortable text measures.

Wrapping and hyphenation

Wrapping behavior is controlled by properties such as overflow-wrap, word-break, and hyphens.

.content {
  overflow-wrap: anywhere;
  hyphens: auto;
}

This lets long words break more gracefully instead of overflowing their container.

4. Step-by-Step Examples

Example 1: Improving paragraph readability

This example shows a simple article paragraph with comfortable line spacing and a readable width.

article {
  max-width: 65ch;
  line-height: 1.65;
}

This keeps lines from becoming too long and gives the text enough vertical breathing room.

Example 2: Preventing a long URL from breaking the layout

Long links and technical strings can overflow if the browser refuses to break them. Adding overflow-wrap helps in tight containers.

.card {
  max-width: 320px;
  overflow-wrap: anywhere;
}

This lets long strings wrap before they force horizontal scrolling.

Example 3: Enabling hyphenation for justified or narrow text

Hyphenation works best when the browser knows the language of the content. It can improve the look of narrow columns.

article {
  hyphens: auto;
}

html {
  lang: "en";
}

In real HTML, the language is set with the lang attribute on the document or element, not with CSS. When language information is present, browsers can hyphenate more accurately.

Example 4: Keeping code-like text from wrapping badly

Sometimes you want body text to wrap normally, but short technical values to stay readable. In those cases, you may use a more controlled wrap strategy on a specific element.

code {
  overflow-wrap: break-word;
}

This helps long tokens break only when necessary, instead of overflowing their container.

5. Practical Use Cases

Article pages where body text needs a comfortable reading width.
Documentation sites that contain long API names, identifiers, and URLs.
Mobile layouts where paragraphs must reflow without causing horizontal scroll.
Product cards that contain descriptive copy and need consistent height.
Localized interfaces where longer words in some languages need more flexible wrapping.

6. Common Mistakes

Mistake 1: Using a fixed pixel line height for all text sizes

Beginners often set line-height in pixels and reuse it everywhere. That can look fine at one font size but become too tight or too loose when the text changes size.

Problem: A fixed line height does not scale naturally with the font, so responsive text can become harder to read.

p {
  font-size: 1.125rem;
  line-height: 24px;
}

Fix: Use a unitless value or a relative unit that scales with the text.

p {
  font-size: 1.125rem;
  line-height: 1.6;
}

The corrected version stays proportional as the font size changes.

Mistake 2: Making text too wide for comfortable reading

A very wide paragraph looks spacious, but it forces the reader’s eye to travel too far on each line. That makes scanning much harder.

Problem: Without a readable measure, text lines can become overly long and visually tiring.

.article-body {
  width: 100%;
}

Fix: Limit the text block width with a readable measure such as 65ch.

.article-body {
  max-width: 65ch;
}

The corrected version keeps line lengths in a range that is easier to read.

Mistake 3: Expecting hyphenation to work without language information

Hyphenation depends on browser support and language data. If the document language is missing, the browser may not know where to break words correctly.

Problem: hyphens: auto may appear to do nothing when the browser cannot determine the text language.

article {
  hyphens: auto;
}

Fix: Provide the language in HTML and keep a fallback wrapping rule for long strings.

<article lang="en">
  <p>A long paragraph of text goes here.</p>
</article>

article {
  hyphens: auto;
  overflow-wrap: anywhere;
}

This works better because the browser has language context and a fallback for difficult strings.

7. Best Practices

Practice 1: Use a unitless line height for body text

Unitless values scale naturally and inherit cleanly, which makes them easier to manage in component-based layouts.

body {
  line-height: 1.5;
}

This is usually more flexible than locking the line height to a pixel value.

Practice 2: Keep reading widths comfortable

Most long-form text reads better in a narrower column than in a full-width container. A width based on ch is a practical starting point for articles and documentation.

.prose {
  max-width: 60ch;
}

This keeps line lengths manageable across screen sizes.

Practice 3: Combine hyphenation with fallback wrapping

Hyphenation improves typography, but it should not be the only tool you rely on. Long identifiers, URLs, and product codes still need a fallback.

.text {
  hyphens: auto;
  overflow-wrap: anywhere;
}

This keeps the layout resilient when the browser cannot hyphenate a word cleanly.

8. Limitations and Edge Cases

hyphens: auto depends on browser support and language data, so results can vary.
Some languages hyphenate differently, and line-breaking rules are not the same everywhere.
overflow-wrap: anywhere is useful for preventing overflow, but it can create very short fragments on narrow screens.
word-break: break-all is more aggressive than most readers expect and can damage readability.
Very narrow containers may still produce awkward line breaks even when wrapping is enabled.
Justified text can expose poor hyphenation or uneven spacing if the line measure is too wide or too narrow.

9. Practical Mini Project

In this mini project, you will style a simple article card so the text reads well on desktop and mobile. The example combines a readable measure, sensible line height, and safe wrapping for long strings.

<article class="article-card" lang="en">
  <h2>Writing Clear CSS Text Layout</h2>
  <p>
    Good text layout improves readability by balancing line length,
    spacing, and wrapping behavior across screen sizes.
  </p>
  <p>
    Long values like documentation.example.com/reference/very-long-path
    should still remain readable without breaking the layout.
  </p>
</article>

.article-card {
  max-width: 62ch;
  line-height: 1.65;
  hyphens: auto;
  overflow-wrap: anywhere;
}

This solution keeps the text block narrow enough for comfortable reading, adds vertical spacing between lines, and ensures long strings do not overflow.

10. Key Points

line-height controls the vertical rhythm of text.
Readable measure usually comes from limiting the width of the text container.
hyphens: auto can improve narrow columns when language information is present.
overflow-wrap and word-break help prevent overflow from long words and URLs.
Text layout works best when spacing, width, and wrapping are designed together.

11. Practice Exercise

Create a paragraph block with a readable width around 60–70 ch.
Set a unitless line-height that makes the text comfortable to read.
Add wrapping rules so a long URL or product code does not overflow.
Test the result on a narrow screen and check whether the text still reads naturally.

Expected output: The paragraph should wrap cleanly, avoid horizontal scrolling, and remain readable on both wide and narrow layouts.

Hint: Start with max-width, then adjust line-height, then add overflow-wrap if needed.

<article class="exercise-text" lang="en">
  <p>
    This paragraph contains a long example path:
    example.com/docs/reference/css-text-layout-with-a-very-long-name.
  </p>
</article>

.exercise-text {
  max-width: 64ch;
  line-height: 1.6;
  hyphens: auto;
  overflow-wrap: anywhere;
}

12. Final Summary

CSS text layout is about making content comfortable to read, not just technically fit into a box. line-height improves vertical spacing, measure controls how long each line feels, and wrapping rules prevent text from breaking layouts when words get too long.

For most content, a unitless line height, a readable maximum width, and a sensible wrapping fallback are enough to create clean, flexible typography. Hyphenation is a useful enhancement, especially in narrow columns, but it works best when the document language is set correctly and the browser has enough information to break words well.

As a next step, try applying these settings to a real article, card, or documentation page in your own project and compare how the same text reads before and after the changes.