2004年10月06日

●半角文字を折り返す

#ブラウザに依存すると思われる話題ですので認識誤り等ありましたら予めご容赦ください。
エントリーに半角文字を連続させて書いた場合、幅を狭くした時に右にはみだしてしまいます。途中にスペースがあればそこで折り返されるみたいですがスペースがないと折り返されません。
上記確認ブラウザはIE6.0・Netscape7.1・Sleipnir1.66です。Opera7.23では独自仕様で"/"や"-"等で折り返されました。


ということで下記の2通りがありました。
まず、折り返したい部分でHTMLタグの <wbr> を埋め込めば折り返されるようです。検索した記事では「折り返したくない部分を <nobr> ~ </nobr> で括り、その中の折り返したい部分に <wbr> を用いる」と記されています。
下の文字列は何もしないと折り返されませんが、hoge5とhoge6の間に <wbr> を挿入してみました。いかがでしょうか(Operaでは折り返されないようですが…)。

hoge1hoge2hoge3hoge4hoge5hoge6hoge7hoge8hoge9hoge10


もうひとつはスタイルシートのblogbody等に

word-break: break-all;

を入れておくという手で、上記は「改行方法を表示範囲に併せて改行する」という設定です。W3C審議中でIEが独自採用したもの(検索結果からの引用)で、ブラウザで動作しないのもありますがIE・Sleipnirでは良好でした。このサイトにも設定してみましたので幅を変更して動作をお試しください(上記のhoge~は動作確認のため <nobr>~</nobr> で括りました)。
下のhoge~でご確認ください(nbrは非設定)。
hoge1hoge2hoge3hoge4hoge5hoge6hoge7hoge8hoge9hoge10

ということで両者を併せて設定しておけばかなり改善されるのではないでしょうか。

  参考記事:HTMLクイックリファレンス

問題提起ありがとうございました:さん、我楽さん

Posted by yujiro at 16:45 | Popup Comments
トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています(記事のタイトルまたは記事の概要が異なる場合は登録されます)。

コメント

すみませーん。^^
お知らせと素早いご対応、ありがとうございます。
スタイルシート内の引用タグ設定に word-break: break-all; を追加したら解消されました。
こんなプロパティあったんですねー。
知らなかった・・・。勉強になります。(笑)

投稿者 Border. : 2004年10月06日 23:42

おはようございますー。
世の中色々あるものですね。
私も勉強になりました。(ていうか暇?(笑))

#ふられなければ調べてなかったかも…

投稿者 yujiro : 2004年10月07日 09:09

どこで突っ込もうかと見守っていました・・
commentのbodyにも僕は入れてますよ

それはそうと、mybloglist
9/17日から小粋空間さんの更新を
ひっぱって来なくなってて
更新されてないのかと思ってました
何か原因ってありますか・・?

投稿者 Deepsnow : 2004年10月07日 11:04

暖かく見守ってくださりありがとうございます(爆)。
ということでコメントにも入れました。アドバイス感謝します!

MyBlogList、更新ping発射しました(こちらもオオボケでした…)

投稿者 yujiro : 2004年10月07日 20:08

遅ればせながら・・・。
yujiroさんの対応の早さにはホント感服しますです。

ってことで、bodyにさっそく追加。

あぁ、分からない時の甘え癖が付いてしまいそうw

投稿者 : 2004年10月07日 20:44

>琴さん
こんにちは。
早速のご利用ありがとうございます。
私ごときでよければどうぞ甘えてやってください。
というか皆さんのおかげでスキルアップできているのです。(笑)

投稿者 yujiro : 2004年10月08日 20:18
コメントする




保存しますか?

太字 イタリック アンダーライン ハイパーリンク 引用

コメントありがとうございます。投稿が反映されるまでに多少時間がかかる場合がありますのでご注意ください。