半角文字を折り返す
Tag：[]
＃ブラウザに依存すると思われる話題ですので認識誤り等ありましたら予めご容赦ください。
エントリーに半角文字を連続させて書いた場合、幅を狭くした時に右にはみだしてしまいます。途中にスペースがあればそこで折り返されるみたいですがスペースがないと折り返されません。
上記確認ブラウザはIE6.0・Netscape7.1・Sleipnir1.66です。Opera7.23では独自仕様で"/"や"-"等で折り返されました。
ということで下記の2通りがありました。
まず、折り返したい部分でHTMLタグの <wbr> を埋め込めば折り返されるようです。検索した記事では「折り返したくない部分を <nobr> ? </nobr> で括り、その中の折り返したい部分に <wbr> を用いる」と記されています。
下の文字列は何もしないと折り返されませんが、hoge5とhoge6の間に <wbr> を挿入してみました。いかがでしょうか（Operaでは折り返されないようですが…）。
2010.05.18
valid な(X)HTMLにならないため、現在はソースコードの掲載のみにしています。
<nobr>hoge1hoge2hoge3hoge4hoge5<wbr>hoge6hoge7hoge8hoge9hoge10</nobr>もうひとつはスタイルシートのblogbody等に
word-break: break-all;を入れておくという手で、上記は「改行方法を表示範囲に併せて改行する」という設定です。W3C審議中でIEが独自採用したもの（検索結果からの引用）で、ブラウザで動作しないのもありますがIE・Sleipnirでは良好でした。このサイトにも設定してみましたので幅を変更して動作をお試しください（上記のhoge?は動作確認のため <nobr>～</nobr> で括りました）。
下のhoge～でご確認ください（nbrは非設定）。
hoge1hoge2hoge3hoge4hoge5hoge6hoge7hoge8hoge9hoge10ということで両者を併せて設定しておけばかなり改善されるのではないでしょうか。
参考記事：HTMLクイックリファレンス
- 10月19日～20日に3カラムテンプレート（固定）をご利用になった方へ
- テンプレート修正
- リンク修正
- サイドメニューのレイアウト変更
- 「最近のコメント」のアンカー修正
- 「続き」を折りたたむスクリプト
≫ HTML文書の小技(2) from ネットビジネス用CGI Perl HTML Javascriptの情報サイト
今回は、前回の「今回は、前回の「 [続きを読む]
すみませーん。＾＾
お知らせと素早いご対応、ありがとうございます。
スタイルシート内の引用タグ設定に word-break: break-all; を追加したら解消されました。
こんなプロパティあったんですねー。
知らなかった・・・。勉強になります。（笑）
おはようございますー。
世の中色々あるものですね。
私も勉強になりました。（ていうか暇？（笑））
＃ふられなければ調べてなかったかも…
どこで突っ込もうかと見守っていました・・
commentのbodyにも僕は入れてますよ
それはそうと、mybloglist
9/17日から小粋空間さんの更新を
ひっぱって来なくなってて
更新されてないのかと思ってました
何か原因ってありますか・・？
暖かく見守ってくださりありがとうございます（爆）。
ということでコメントにも入れました。アドバイス感謝します！
MyBlogList、更新ping発射しました（こちらもオオボケでした…）
遅ればせながら・・・。
yujiroさんの対応の早さにはホント感服しますです。
ってことで、bodyにさっそく追加。
あぁ、分からない時の甘え癖が付いてしまいそうｗ
＞琴さん
こんにちは。
早速のご利用ありがとうございます。
私ごときでよければどうぞ甘えてやってください。
というか皆さんのおかげでスキルアップできているのです。（笑）
