Course Outline (Part 17)

Welcome to Part 17 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Text Styling, Spacing & Overflow.

Good typography is not just about choosing attractive font families. You must manage vertical line heights, letter and word spacing ratios, wrap bounds, word breaking points, and overflow clipping. Properly handling text ensures readability across all devices and prevents layout breaks when rendering dynamic content.

Chapter 105: Typography Spacing Coordinates

Readable layout typography depends on fine adjustments to spacing properties:

  • line-height: Set to unitless numbers (e.g. 1.6) for body text, ensuring proportional inherited scaling when children change sizes.
  • letter-spacing: Controls gaps between character nodes. Adding a tiny negative offset (like -0.02em) makes large headlines look cohesive.
  • word-spacing: Controls gaps between word strings.
  • text-indent: Indents the first line of text blocks (standard in book print formatting).

Chapter 106: Spacing & Wrap Controls

When words reach the boundaries of their containers, you configure wrapping behaviors:

106.1 White Space (white-space)

Determines how whitespace characters and line breaks inside HTML code are rendered:

  • normal (Default): Collapses consecutive spaces into one, wraps text naturally.
  • nowrap: Collapses spaces, but forces all text to remain on a single line, causing layout overflow if container widths are capped.
  • pre: Preserves spaces and line breaks exactly as written in HTML (like <pre> tags).
  • pre-wrap: Preserves spaces and line breaks, but wraps text naturally to fit container bounds.

106.2 Word Break (word-break)

Determines how the browser inserts line breaks inside words:

  • normal: Breaks lines at standard word spaces.
  • break-all: Forces breaks anywhere (including in the middle of words) to prevent container overflows.
  • keep-all: Prevents breaks within Chinese/Japanese/Korean text, wrapping only at natural spaces.

106.3 Overflow Wrap (overflow-wrap)

Tells the browser whether it is allowed to break long, unbreakable words (like URLs or long file names) to fit within container boundaries:

  • break-word: Wraps long words by inserting line breaks in the middle of strings, but only if they cannot fit otherwise. Recommended for user comments feed blocks.

Chapter 107: Text Overflow & Line Clamping

If content overflows, you can crop it gracefully using standard CSS overrides:

107.1 Single-Line Ellipsis

To crop overflow text on a single line and add trailing ellipsis (...):

.text-ellipsis {
  white-space: nowrap;     /* 1. Prevent line wraps */
  overflow: hidden;        /* 2. Hide spilling text */
  text-overflow: ellipsis; /* 3. Add trailing dots */
}

107.2 Multi-Line Clamping (line-clamp)

To crop text after a specific number of lines and add ellipsis:

.card-paragraph {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Clips text after exactly 3 lines */
  overflow: hidden;
}

Chapter 108: Writing Modes & Direction

  • writing-mode: Controls text reading flow directions:
    • horizontal-tb (Default): Top to bottom, horizontal lines.
    • vertical-rl: Right to left, vertical lines (traditional Japanese/Korean).
    • vertical-lr: Left to right, vertical lines.
  • direction: Manages direction flows: ltr (Left to Right) or rtl (Right to Left).

Chapter 109: Text Styling Practice & Self-Check

109.1 Practice Exercises

  1. Exercise 1: Clean Article Title Clamp: Clamp a card headline to 2 lines and display ellipsis: 
    .headline-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.5rem;
  line-height: 1.3;
}
  2. Exercise 2: Code block Wrap Preservation: Style code blocks to preserve spaces but wrap cleanly when overflowing. 
    code-block {
  font-family: monospace;
  white-space: pre-wrap; /* Preserve spaces, wrap lines */
  overflow-wrap: break-word; /* Wrap long string words */
}

109.2 Self-Check Questions

  1. What property controls gaps between individual characters?
    • Answer: letter-spacing.
  2. Which property prevents text lines from wrapping?
    • Answer: white-space: nowrap;.
  3. What are the three properties required for single-line text ellipsis?
    • Answer: white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.
  4. What does overflow-wrap: break-word accomplish?
    • Answer: It forces long unbreakable strings (like URLs) to break in the middle to fit within container dimensions.
  5. Can line-clamp work without display: -webkit-box configured?
    • Answer: No, line-clamp requires the -webkit-box display engine wrapper to calculate line coordinate thresholds.
  6. Does word-break: break-all insert hyphens at line breaks?
    • Answer: No, it cuts words abruptly without hyphens unless the hyphens property is configured.
  7. What unitless value is recommended for line-height?
    • Answer: 1.5 to 1.6 for standard body readability.
  8. What is the purpose of writing-mode: vertical-rl?
    • Answer: It positions text vertically, flowing lines from right to left.
  9. What happens when you apply text-transform: uppercase?
    • Answer: It converts all text characters inside the element to capital letters.
  10. Does line-clamp delete hidden text from the DOM tree?
    • Answer: No. It only crops the visual layout container; all text remains searchable and readable by crawlers.

Discussion

Loading comments...