半角文字を折り返す
#ブラウザに依存すると思われる話題ですので認識誤り等ありましたら予めご容赦ください。
エントリーに半角文字を連続させて書いた場合、幅を狭くした時に右にはみだしてしまいます。途中にスペースがあればそこで折り返されるみたいですがスペースがないと折り返されません。
上記確認ブラウザは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クイックリファレンス
- 個別アーカイブに「続きを読む」を導入
- 6週目のカレンダー枠が表示されない不具合修正
- サイドメニュー折りたたみの動作遅延対処
- TypeKeyでサイン・インしても表示が変わらない問題を対処
- トラックバック表示方法変更&テンプレート修正
- 10月19日?20日に3カラムテンプレート(固定)をご利用になった方へ
- Trackbackの連続投稿を受け付けない
- トラックバックのタイムアウトについて
- エントリーにpタグとbrタグが入る仕組み(その3:textareaにbrタグを挿入しない)
- テンプレート修正
- エントリーにpタグとbrタグが入る仕組み(その2:blockquoteにbrタグを挿入)
- エントリーにpタグとbrタグが入る仕組み(その1:コード解析)
- 月送りカレンダー状態保持スクリプト
- アーカイブの設定について
- ページ分割のカスタマイズ修正&追記
- テンプレート・モジュールの利用
- リンク修正
- 月送りカレンダー
- サイドメニューのレイアウト変更
≫ HTML文書の小技(2) from ネットビジネス用CGI Perl HTML Javascriptの情報サイト
今回は、前回の「今回は、前回の「 [続きを読む]
すみませーん。^^
お知らせと素早いご対応、ありがとうございます。
スタイルシート内の引用タグ設定に word-break: break-all; を追加したら解消されました。
こんなプロパティあったんですねー。
知らなかった・・・。勉強になります。(笑)
おはようございますー。
世の中色々あるものですね。
私も勉強になりました。(ていうか暇?(笑))
#ふられなければ調べてなかったかも…
どこで突っ込もうかと見守っていました・・
commentのbodyにも僕は入れてますよ
それはそうと、mybloglist
9/17日から小粋空間さんの更新を
ひっぱって来なくなってて
更新されてないのかと思ってました
何か原因ってありますか・・?
暖かく見守ってくださりありがとうございます(爆)。
ということでコメントにも入れました。アドバイス感謝します!
MyBlogList、更新ping発射しました(こちらもオオボケでした…)
遅ればせながら・・・。
yujiroさんの対応の早さにはホント感服しますです。
ってことで、bodyにさっそく追加。
あぁ、分からない時の甘え癖が付いてしまいそうw
>琴さん
こんにちは。
早速のご利用ありがとうございます。
私ごときでよければどうぞ甘えてやってください。
というか皆さんのおかげでスキルアップできているのです。(笑)

