hyphens値

このツールでできること

• hyphens値では、CSS hyphens の none、manual、auto を、ハイフネーション禁止・手動・自動の違いで確認できます。
• 関連する観点として hyphens値、css hyphens、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. Item 列から none、manual、auto の値を確認します。
2. Content 列でハイフネーションを止めるのか、手動位置だけ使うのか、自動に任せるのかを見ます。
3. 英文の長い単語を扱う場合は auto を候補にし、HTML の lang 属性も確認します。
4. 意図しない分割を避けたい見出しやコード片では none を検討します。

入力例・出力例

よくある利用シーン

• 英語本文で長い単語が枠からはみ出すときに hyphens: auto を検討する場面。
• ブランド名や製品名を途中で切らせたくない見出しの指定を確認するとき。
• 軟ハイフンを入れた原稿で manual 指定の意味を共有したいとき。
• word-break や overflow-wrap と併用する前に hyphens 側の役割を整理するとき。

結果確認のポイント

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

注意点

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

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

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

よくある質問

関連ツール