半角文字を折り返す

半角文字を折り返す

Posted at October 6,2004 4:45 PM
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クイックリファレンス

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

HTML文書の小技(2) from ネットビジネス用CGI Perl HTML Javascriptの情報サイト
今回は、前回の「今回は、前回の「 [続きを読む]

Tracked on March 24, 2006 1:24 AM
コメント

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

[1] Posted by Border. : October 6, 2004 11:42 PM

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

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

[2] Posted by yujiro : October 7, 2004 9:09 AM

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

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

[3] Posted by Deepsnow : October 7, 2004 11:04 AM

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

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

[4] Posted by yujiro : October 7, 2004 8:08 PM

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

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

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

[5] Posted by : October 7, 2004 8:44 PM

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

[6] Posted by yujiro : October 8, 2004 8:18 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)