CSS word-break ジェネレーター
単語の改行ルールを制御するCSSプロパティを視覚的に生成。長い単語やURLの折り返し処理に。
プレビュー
This is a very long word: supercalifragilisticexpialidocious. And here's a URL: https://www.example.com/very/long/url/path/to/resource. 日本語のテキストもあります。改行処理のテストです。
CSS出力
CSS
/* デフォルト値のため出力なし */
設定
単語内での改行を制御
オーバーフロー時の折り返し動作
空白文字の扱い
ハイフンによる単語分割
使い方
長い単語やURLが要素からはみ出すのを防ぐために、適切な改行ルールを設定します。
推奨設定
- 通常のテキスト: overflow-wrap: break-word
- URL・コード: word-break: break-all
- 日本語: word-break: keep-all（単語を保持）
- 折り返し禁止: white-space: nowrap