長い文字列の改行方法 - wbr, ­, css
Posted by yoosee on Web at 2005-01-04 23:42 JST
1
wbr
例えばかなり長いドメイン名や URL を、それに対してあまり広くない block 要素の中に入れたいとする。普通に入れると文字だけ枠からはみ出したり、ブラウザに横スクロールバーが出たりとあまり嬉しくない事が起こる。そういった際に使う要素として <wbr> と言う NN や IE での拡張タグがあり、これを入れた場所での改行を許す、と言う効果があるらしい。但しこれは W3C の HTML/XHTML の仕様には無い拡張仕様、なのだが、現実には Gecko でも対応しているように見える。
2
­ - ソフトハイフン
この代りには、 ­ ないし ­ と言う特殊文字が使えるようだ。<!ENTITY shy CDATA "­" -- soft hyphen = discretionary hyphen,
U+00AD ISOnum -->この ­ は shyなやつ - 徒書 によれば - その単語が 1行の表示幅に入りきらない場合、行末に - (ハイフン)を付随させて折り返す
- その単語が 1行の表示幅に入りきる場合は表示されない
3
CSS での解決策
この手の見た目の制御には、素直にいけば CSS を使うことを考えるべきだ。実際、css では word-break: break-all; と言う指定ができる。しかしこれは「(日本語のように)単語途中でも無視して折り返す」と言うだけの指定なので、例えば長いドメイン/URL の . (ドット) で折り返し許可したい、と言う用途にはあまり向かない。word-wrap: break-word; も挙動としては同様のようだ。別方向の解としては overflow: auto; を設定することで、その block 要素のみに閉じたスクロールバーを付け、全体のレイアウトは崩さない、と言った方法もある。この日記でも pre 要素にその方法を使っている。
4
IE6, Firefox, w3m での表示挙動
ちなみに上記の事項を IE6, Firefox1.0, w3m で試してみた。| IE6 | Firefox 1.0 | w3m 0.5.1 | |
|---|---|---|---|
| <wbr> | ○ | ○ | ○ |
| ­ / ­ | ○ | × | △ |
| word-break | ○ | ○ | × |
と言うことで、今のところ「1行が長すぎる場合に指定箇所で改行を入れる」方法は HTML/XHTML 非標準の WBR しかなさそうだ、と言うちょっと微妙な結果になってしまった。
とすると良さげですね。