zfb
GitHub repository

Type to search...

to open search from anywhere

Text layout

Set text alignment, whitespace handling, wrapping, and truncation behavior.

Control where text aligns, how spaces and line breaks behave, and how long words or single lines fit a container. Start with normal wrapping; use specialized behavior only when the content and available width call for it.

Quick reference

Example classExpected declarations
text-centertext-align: center;
whitespace-pre-wrapwhite-space: pre-wrap;
break-allword-break: break-all;
break-normaloverflow-wrap: normal; word-break: normal;
break-wordsoverflow-wrap: break-word;
wrap-anywhereoverflow-wrap: anywhere;
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;
Example setup

The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. These examples use fixed demo widths authored in wind-demo CSS so the wrapping behavior is visible; that CSS does not set text alignment, white-space, word-break, overflow-wrap, or truncation. Japanese text wraps at natural character boundaries where the browser allows it.

Examples in use

Align and follow text direction

The fixed-width rows compare physical alignment with logical start and end. The RTL rows show that start follows direction.

Align and follow text direction
HTML
<div class="wind-demo-align">
  <p class="text-left">Left: The same sentence wraps inside this box. / 左寄せの表示です。</p>
  <p class="text-center">Center: The same sentence wraps inside this box. / 中央寄せの表示です。</p>
  <p class="text-right">Right: The same sentence wraps inside this box. / 右寄せの表示です。</p>
  <p class="text-justify">Justified copy uses the available line width. / 両端揃えは行幅を使います。</p>
  <p dir="ltr" class="text-start">Logical start in left-to-right text. / 左から始まる文章です。</p>
  <p dir="rtl" class="text-start">Logical start in right-to-left text. / 右から始まる文章です。</p>
  <p dir="rtl" class="text-end">Logical end in right-to-left text. / 右から始まる文章です。</p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-align {
  max-width: 23rem;
  color: #223247;
}

.wind-demo-align p {
  margin: 0 0 .55rem;
  border: 1px solid #b7c5d4;
  padding: .45rem .65rem;
}

.wind-demo-align p:last-child {
  margin-bottom: 0;
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: end;
}
.text-justify {
  text-align: justify;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-align": true
    },
    "safelist": {
      "docs-preview": [
        "text-left",
        "text-center",
        "text-right",
        "text-justify",
        "text-start",
        "text-end"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo-align { max-width: 23rem; color: #223247; }
.wind-demo-align p { margin: 0 0 0.55rem; border: 1px solid #b7c5d4; padding: 0.45rem 0.65rem; }
.wind-demo-align p:last-child { margin-bottom: 0; }

Keep or collapse whitespace

Each row receives the same spaces and source line breaks so the six white-space modes can be compared directly.

Keep or collapse whitespace
HTML
<div class="wind-demo-whitespace">
  <p><span class="wind-demo-label">normal</span><span class="wind-demo-sample whitespace-normal">Alpha  beta
日本語 line
space  end</span></p>
  <p><span class="wind-demo-label">nowrap</span><span class="wind-demo-sample whitespace-nowrap">Alpha  beta 日本語 line space  end</span></p>
  <p><span class="wind-demo-label">pre</span><span class="wind-demo-sample whitespace-pre">Alpha  beta
日本語 line
space  end</span></p>
  <p><span class="wind-demo-label">pre-line</span><span class="wind-demo-sample whitespace-pre-line">Alpha  beta
日本語 line
space  end</span></p>
  <p><span class="wind-demo-label">pre-wrap</span><span class="wind-demo-sample whitespace-pre-wrap">Alpha  beta
日本語 line
space  end</span></p>
  <p><span class="wind-demo-label">break-spaces</span><span class="wind-demo-sample whitespace-break-spaces">Alpha  beta
日本語 line
space  end</span></p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-whitespace {
  max-width: 24rem;
  color: #223247;
}

.wind-demo-whitespace p {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  padding: .4rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-whitespace p:last-child {
  border-bottom: 0;
}

.wind-demo-label {
  flex: 0 0 5.5rem;
  color: #5d6c7c;
  font-size: .75rem;
}

.wind-demo-sample {
  min-width: 0;
  flex: 1;
  border-left: 2px solid #b7c5d4;
  padding-left: .5rem;
}
.whitespace-break-spaces {
  white-space: break-spaces;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-whitespace": true,
      "wind-demo-label": true,
      "wind-demo-sample": true
    },
    "safelist": {
      "docs-preview": [
        "whitespace-normal",
        "whitespace-nowrap",
        "whitespace-pre",
        "whitespace-pre-line",
        "whitespace-pre-wrap",
        "whitespace-break-spaces"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo-whitespace { max-width: 24rem; color: #223247; }
.wind-demo-whitespace p { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.4rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-whitespace p:last-child { border-bottom: 0; }
.wind-demo-label { flex: 0 0 5.5rem; color: #5d6c7c; font-size: 0.75rem; }
.wind-demo-sample { min-width: 0; flex: 1; border-left: 2px solid #b7c5d4; padding-left: 0.5rem; }

Handle an unbroken identifier

A long URL shows normal overflow, character breaks, emergency word wrapping, and anywhere wrapping in equal-width boxes.

Handle an unbroken identifier
HTML
<div class="wind-demo-wrap-grid">
  <p class="wind-demo-wrap-box break-normal"><strong>normal</strong><br />https://example.invalid/verylongsegmentwithoutbreaks</p>
  <p class="wind-demo-wrap-box break-all"><strong>break-all</strong><br />https://example.invalid/verylongsegmentwithoutbreaks</p>
  <p class="wind-demo-wrap-box break-words"><strong>break-words</strong><br />https://example.invalid/verylongsegmentwithoutbreaks</p>
  <p class="wind-demo-wrap-box wrap-anywhere"><strong>anywhere</strong><br />https://example.invalid/verylongsegmentwithoutbreaks</p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-wrap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  max-width: 28rem;
}

.wind-demo-wrap-box {
  min-width: 0;
  margin: 0;
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .6rem;
}

.wind-demo-wrap-box strong {
  display: block;
  margin-bottom: .3rem;
  color: #5d6c7c;
  font-size: .75rem;
}
.break-all {
  word-break: break-all;
}
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}
.break-words {
  overflow-wrap: break-word;
}
.wrap-anywhere {
  overflow-wrap: anywhere;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-wrap-grid": true,
      "wind-demo-wrap-box": true
    },
    "safelist": {
      "docs-preview": [
        "break-normal",
        "break-all",
        "break-words",
        "wrap-anywhere"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo-wrap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; max-width: 28rem; }
.wind-demo-wrap-box { min-width: 0; margin: 0; color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem; }
.wind-demo-wrap-box strong { display: block; margin-bottom: 0.3rem; color: #5d6c7c; font-size: 0.75rem; }

Trim one line to a width

truncate supplies overflow hidden, ellipsis, and nowrap; the authored width makes the cutoff visible.

Trim one line to a width
HTML
<p class="wind-demo-truncate truncate">A long title needs a single-line preview when the card has limited room / 長い見出しを狭いカード幅に収める</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-truncate {
  width: 15rem;
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .6rem;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-truncate": true
    },
    "safelist": {
      "docs-preview": [
        "truncate"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo-truncate { width: 15rem; color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem; }

Custom and named values

text-left, text-center, text-right, text-justify, text-start, and text-end control alignment; start and end follow the element direction. whitespace-* chooses how spaces and source newlines collapse, stay, or wrap. break-all can split at any character, break-words allows an emergency break for a long word, and wrap-anywhere also changes min-content sizing. break-normal restores normal word-break and overflow-wrap. truncate combines hidden overflow, an ellipsis, and no wrapping; give the element a real width constraint or the effect has nothing to trim. For Japanese, normal line breaking already uses character-level opportunities, so compare these controls with long Latin identifiers as well as Japanese prose.

Related guides: Utility grammar · Variants

Catalog details

text

FieldValue
Catalog identifierv1.text.align
Class patterntext-<suffix>
Grammar{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values6
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and ranktext-layout (20)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiestext-align

Accepted values

KindSuffixEmitted value
keyword"left""left"
keyword"center""center"
keyword"right""right"
keyword"justify""justify"
keyword"start""start"
keyword"end""end"

Declaration templates

PropertyValue kindFixed value
text-alignresolvednull

Catalog examples

Example classExpected declarations
text-lefttext-align: left

whitespace

FieldValue
Catalog identifierv1.whitespace
Class patternwhitespace-<suffix>
Grammar{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values6
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and ranktext-layout (20)
Order rank1
Selector shapeownElement
Spec version1
Emitter propertieswhite-space

Accepted values

KindSuffixEmitted value
keyword"normal""normal"
keyword"nowrap""nowrap"
keyword"pre""pre"
keyword"pre-line""pre-line"
keyword"pre-wrap""pre-wrap"
keyword"break-spaces""break-spaces"

Declaration templates

PropertyValue kindFixed value
white-spaceresolvednull

Catalog examples

Example classExpected declarations
whitespace-normalwhite-space: normal

break-all

FieldValue
Catalog identifierv1.break-all
Class patternbreak-all
Grammar{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and ranktext-layout (20)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesword-break

Accepted values

KindSuffixEmitted value
exactnull"break-all"

Declaration templates

PropertyValue kindFixed value
word-breakfixed"break-all"

Catalog examples

Example classExpected declarations
break-allword-break: break-all

break-normal

FieldValue
Catalog identifierv1.break-normal
Class patternbreak-normal
Grammar{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and ranktext-layout (20)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesoverflow-wrap, word-break

Accepted values

KindSuffixEmitted value
exactnull"normal"

Declaration templates

PropertyValue kindFixed value
overflow-wrapfixed"normal"
word-breakfixed"normal"

Catalog examples

Example classExpected declarations
break-normaloverflow-wrap: normal; word-break: normal

break-words

FieldValue
Catalog identifierv1.break-words
Class patternbreak-words
Grammar{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and ranktext-layout (20)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesoverflow-wrap

Accepted values

KindSuffixEmitted value
exactnull"break-word"

Declaration templates

PropertyValue kindFixed value
overflow-wrapfixed"break-word"

Catalog examples

Example classExpected declarations
break-wordsoverflow-wrap: break-word

wrap-anywhere

FieldValue
Catalog identifierv1.wrap-anywhere
Class patternwrap-anywhere
Grammar{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and ranktext-layout (20)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesoverflow-wrap

Accepted values

KindSuffixEmitted value
exactnull"anywhere"

Declaration templates

PropertyValue kindFixed value
overflow-wrapfixed"anywhere"

Catalog examples

Example classExpected declarations
wrap-anywhereoverflow-wrap: anywhere

truncate

FieldValue
Catalog identifierv1.truncate
Class patterntruncate
Grammar{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
Accepted values1
Token categoriesNo token category
Negative-value policyforbidden
Conflict group and ranktext-layout (20)
Order rank3
Selector shapeownElement
Spec version1
Emitter propertiesoverflow, text-overflow, white-space

Accepted values

KindSuffixEmitted value
exactnull"hidden"

Declaration templates

PropertyValue kindFixed value
overflowfixed"hidden"
text-overflowfixed"ellipsis"
white-spacefixed"nowrap"

Catalog examples

Example classExpected declarations
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap

Revision History

CreatedUpdated