HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > HTML 長い URL の途中で 改行表示する (style="word-break: break-all;")
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML 長い URL の途中で 改行表示する (style="word-break: break-all;")


HTML 長い URL の途中で 改行表示する (style="word-break: break-all;")



枠の中に文書を記述する際、長い文書の場合、枠の中に納まるように、自動的に改行されますが、長い URL を記述しようとした場合は、自動改行は行われず、枠が拡張され、レイアウトが崩れてしまいます

英単語等は、単語の途中で改行されると、極端読みづらくなったり、あるいは、別の意味になってしまったりすることもあるため、単語の途中では改行しないよう制御されており、これを禁則処理といいます


実際の英単語等の場合であれば、それ程極端に長い単語も存在しませんので問題ないのですが、その英単語であるか否かの判定は、英数字記号が、スペースで区切られること無く連続して記述されているか否かで判定されているため、URLのように、間にスペース区切りが入ることなく、英数字記号が連続している場合、ひとつの単語とみなされ、自動改行が行われず、先に記述した様な、ページレイアウトを崩す元凶となってしまいます

そのような問題を防ぐため、URL 等、長い英数字記号文字列を決まった枠内に納まるよう改行させたいときは、枠のスタイル設定として、下記を記述します



word-break 書式



word-break は、下記の様に記述します


style="word-break: break-all;"



word-break 記述例



word-break の記述例を下記に示します

両者ともに、セル幅として、「width="250"」を設定していますが、デフォルトでは、勝手にセル幅が拡張されてしまいます


記述例 指定なし
表示例 https://abhp.net/hp/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.html

記述例 style="word-break: break-all;"
表示例 https://abhp.net/hp/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.html



word-break 指定値 意味



word-break では、下記の値を指定できます


normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます
日本語、中国語、韓国語等は、表示範囲に合わせて改行されますので、単語の途中で改行されることもあります
break-all 言語に関係なく表示範囲に合わせて改行されます
そのため単語の途中で改行されることもあります
keep-all 言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML 長い URL の途中で 改行表示する (style="word-break: break-all;")
   

© 2014 abhp.net All Rights Reserved.

参考情報


word-break-スタイルシートリファレンス
word-break-CSS3リファレンス
Word2010:禁則処理とは - 教えて!HELPDESK

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP