zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

テキスト配置

文字の整列、空白、折り返し、省略表示を設定します。

文字揃え、空白や改行の扱い、長い単語や1行テキストの収め方を調整します。まず通常の折り返しを使い、内容と幅に合わせて必要な挙動を選びます。

クラスと CSS の早見表

クラスの例期待される宣言
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;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。折り返しを確認しやすい固定幅は wind-demo CSS で指定します。この CSS は text-align、white-space、word-break、overflow-wrap、truncate を設定しません。日本語はブラウザーが許可する自然な文字境界で折り返します。

使い方の例

文字揃えと文章の方向

固定幅の行で物理方向の揃え方と論理的な start、end を比べます。RTL の行では start が方向に従う様子を示します。

文字揃えと文章の方向
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;
}
この例の設定
{
  "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"
      ]
    }
  }
}
デモ用の自作 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; }

空白の保持と折り畳み

6種類の white-space を同じ空白とソース内改行に適用し、挙動を比較します。

空白の保持と折り畳み
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;
}
この例の設定
{
  "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"
      ]
    }
  }
}
デモ用の自作 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; }

分割できない識別子を扱う

長いURLで通常のはみ出し、文字分割、緊急折り返し、anywhere の違いを同じ幅で比べます。

分割できない識別子を扱う
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;
}
この例の設定
{
  "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"
      ]
    }
  }
}
デモ用の自作 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; }

幅に合わせて1行を省略する

truncate は overflow hidden、ellipsis、nowrap を指定します。デモの幅制限により省略位置が見えます。

幅に合わせて1行を省略する
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;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-truncate": true
    },
    "safelist": {
      "docs-preview": [
        "truncate"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-truncate { width: 15rem; color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem; }

任意値と名前付きの値

text-left、text-center、text-right、text-justify、text-start、text-end は文字揃えを制御します。start と end は要素の方向に従います。whitespace-* は空白やソース内の改行を畳むか保持するか、折り返すかを選びます。break-all は任意の文字間で分割し、break-words は長い単語の緊急折り返しを許可し、wrap-anywhere は min-content の幅にも影響します。break-normal は通常の word-break と overflow-wrap に戻します。truncate は overflow hidden、ellipsis、nowrap をまとめて指定するため、切り詰めるには実際の幅制限が必要です。日本語は通常の行分割でも文字単位で折り返せるため、長い英数字の識別子と日本語の文章を合わせて確認してください。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

text

フィールド値
カタログ識別子v1.text.align
クラスパターンtext-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値6
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位text-layout (20)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティtext-align

受け入れる値

種類接尾辞出力される値
keyword"left""left"
keyword"center""center"
keyword"right""right"
keyword"justify""justify"
keyword"start""start"
keyword"end""end"

宣言テンプレート

プロパティ値の種類固定値
text-alignresolvednull

カタログの例

クラスの例期待される宣言
text-lefttext-align: left

whitespace

フィールド値
カタログ識別子v1.whitespace
クラスパターンwhitespace-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値6
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位text-layout (20)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティwhite-space

受け入れる値

種類接尾辞出力される値
keyword"normal""normal"
keyword"nowrap""nowrap"
keyword"pre""pre"
keyword"pre-line""pre-line"
keyword"pre-wrap""pre-wrap"
keyword"break-spaces""break-spaces"

宣言テンプレート

プロパティ値の種類固定値
white-spaceresolvednull

カタログの例

クラスの例期待される宣言
whitespace-normalwhite-space: normal

break-all

フィールド値
カタログ識別子v1.break-all
クラスパターンbreak-all
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位text-layout (20)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティword-break

受け入れる値

種類接尾辞出力される値
exactnull"break-all"

宣言テンプレート

プロパティ値の種類固定値
word-breakfixed"break-all"

カタログの例

クラスの例期待される宣言
break-allword-break: break-all

break-normal

フィールド値
カタログ識別子v1.break-normal
クラスパターンbreak-normal
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位text-layout (20)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverflow-wrap, word-break

受け入れる値

種類接尾辞出力される値
exactnull"normal"

宣言テンプレート

プロパティ値の種類固定値
overflow-wrapfixed"normal"
word-breakfixed"normal"

カタログの例

クラスの例期待される宣言
break-normaloverflow-wrap: normal; word-break: normal

break-words

フィールド値
カタログ識別子v1.break-words
クラスパターンbreak-words
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位text-layout (20)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverflow-wrap

受け入れる値

種類接尾辞出力される値
exactnull"break-word"

宣言テンプレート

プロパティ値の種類固定値
overflow-wrapfixed"break-word"

カタログの例

クラスの例期待される宣言
break-wordsoverflow-wrap: break-word

wrap-anywhere

フィールド値
カタログ識別子v1.wrap-anywhere
クラスパターンwrap-anywhere
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位text-layout (20)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverflow-wrap

受け入れる値

種類接尾辞出力される値
exactnull"anywhere"

宣言テンプレート

プロパティ値の種類固定値
overflow-wrapfixed"anywhere"

カタログの例

クラスの例期待される宣言
wrap-anywhereoverflow-wrap: anywhere

truncate

フィールド値
カタログ識別子v1.truncate
クラスパターンtruncate
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位text-layout (20)
並び順の順位3
セレクタの形ownElement
仕様バージョン1
出力するプロパティoverflow, text-overflow, white-space

受け入れる値

種類接尾辞出力される値
exactnull"hidden"

宣言テンプレート

プロパティ値の種類固定値
overflowfixed"hidden"
text-overflowfixed"ellipsis"
white-spacefixed"nowrap"

カタログの例

クラスの例期待される宣言
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap

Revision History

作成更新