word-break値

このツールでできること

• word-break値では、word-break の normal、break-all、keep-all、break-word を短い説明付きで確認できます。
• 関連する観点として word-break値、word-break、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. Item 列で normal、break-all、keep-all、break-word の値を確認します。
2. Content 列で、通常、全ての文字で改行、CJK単語を保持、単語中でも改行という差を読みます。
3. 長い英数字を強制的に割る場合は break-all、CJK の語区切りを保ちたい場合は keep-all を候補にします。
4. overflow-wrap との役割差も確認し、本文全体へ強く効かせすぎないようにします。

入力例・出力例

よくある利用シーン

• 長い URL、ID、ハッシュ文字列がカード幅からはみ出すとき。
• 日本語・韓国語・中国語を含む見出しの折り返し方を見直すとき。
• overflow-wrap と word-break のどちらで対処するか比較するとき。
• CSS 仕様上の値と、実装表が扱う主要4値の範囲を切り分けるとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• word-break値、word-break、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• word-break値の主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール