HTML 長い URL の途中で 改行表示する （style="word-break: break-all;"）
枠の中に文書を記述する際、長い文書の場合、枠の中に納まるように、自動的に改行されますが、長い URL を記述しようとした場合は、自動改行は行われず、枠が拡張され、レイアウトが崩れてしまいます
英単語等は、単語の途中で改行されると、極端読みづらくなったり、あるいは、別の意味になってしまったりすることもあるため、単語の途中では改行しないよう制御されており、これを禁則処理といいます
実際の英単語等の場合であれば、それ程極端に長い単語も存在しませんので問題ないのですが、その英単語であるか否かの判定は、英数字記号が、スペースで区切られること無く連続して記述されているか否かで判定されているため、URLのように、間にスペース区切りが入ることなく、英数字記号が連続している場合、ひとつの単語とみなされ、自動改行が行われず、ページレイアウトを崩す元凶となってしまいます
そのような問題を防ぐため、URL 等、長い英数字記号文字列を決まった枠内に納まるよう改行させたいときは、枠のスタイル設定として、下記を記述します
word-break 書式
word-break は、下記の様に記述します
|
記述 |
説明 |
| 書式 |
style="word-break: break-all;" |
ページ内HTMLタグに指定 （内部スタイルシート） |
body{
word-break: break-all;
} |
スタイルシートファイルに指定 （外部スタイルシート） |
word-break 記述例
word-break の記述例を下記に示します
テーブルセル個別に設定する場合
両者ともに、セル幅として、「width="400"」を設定していますが、デフォルトでは、途中で改行されないため勝手にセル幅が拡張されてしまいます
| 記述例 |
なし （記述を省略した場合（初期値）です） |
| 表示例 |
https://abhp.net/hp/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.html |
| 記述例 |
<td style="word-break: break-all;"> ～ </td> |
| 表示例 |
https://abhp.net/hp/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.html |
サイトページ全体に対して設定する場合
日本語ページサイトの場合で、英単語をほとんど使っておらず、また、英単語の途中で自動改行されてもかまわないという場合、外部スタイルシート（内部スタイルシートでも可）で
「body」 （ページ全体に設定されます） に対して 「word-break: break-all;」 を指定しておいて、もし、改行されたくないところが出てくれば、そこだけ、ページ内HTMLで
「style="word-break: normal;"」 設定するという手もあります
| 記述例 |
body{
word-break: break-all;
} |
| 記述例 |
<td style="word-break: normal;"> ～ </td> |
| 表示例 |
https://abhp.net/hp/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.html |
| 記述例 |
なし （上位の「body」に対する設定が引き継がれます） |
| 表示例 |
https://abhp.net/hp/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.html |
word-break 適用対象 値の継承 指定値 意味
word-break では、下記の値を指定できます
| 適用対象 |
すべての要素 |
| 値の継承 |
する
上位の要素に指定した場合、下位の要素に対してもその設定が引き継がれます |
| 値 |
意味 |
| normal |
デフォルト値です
英語等は単語の途中では改行せず、単語の切れ目で改行されます
日本語、中国語、韓国語等は、表示範囲に合わせて改行されますので、単語の途中で改行されることもあります |
| break-all |
言語に関係なく表示範囲に合わせて改行されます
そのため単語の途中で改行されることもあります |
| keep-all |
言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます |
|