Entries


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

-件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/1160-0cea7237

css:htmlボックス内の文字が端で折り返さず突き抜けてしまう件について


twitterの新着ポストをブログのサイドバーに読み込んでみました.

すると

読み込まれるhtmlにスタイルを設定してみたところどうも折り返しがうまくいきません.改行されてほしいところなのにリンクが突き抜けてボックスが広がってしまいます.ブラウザはIE6とChromeです.

htmlはリストタグの中にリンクタグが入っている形でソースは以下をご覧ください.


まずIE6とIE7の症状画像
IEボックス突き抜け画像
画像では二つの投稿が表示されており,下の投稿は問題ありませんが,上の投稿はリンクタグがリストのボックス右端を突き抜けていますし,リストの右端も押されて膨らんでいます.

次がChromeの症状画像
Chromeボックス突き抜け画像
こちらもリンクタグがボックスの右端を突き抜けています.

この現象確か昔やったことあるんですよね.すっかり忘れてしまったんでメモっておきます.もう使わないかもしれませんけれど.

答えは簡単でスタイルに一行足してあげれば解決でした.
li {
word-break: break-all;
}


リストタグにword-breakプロパティを足してあげるだけで改行OKです.

なんということでしょう.

正常な画像
ボックス折り返し画像
これが表示したい画像になります.ちゃんとリンクタグが改行されて折り返されています.

古そうなブラウザではこういう現象がありましたが,新しいブラウザでは次第に対応されていくはずですので,あと数年したらボックス突き抜け現象なんか忘れ去られてしまうかもしれませんね.

ブラウザ選択の時代を読み解くブラウザ選択の時代を読み解く
(2005/09)
スコット グランネマン

商品詳細を見る

0件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

0件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/1160-0cea7237

Appendix

プロフィール

川崎修

  • Author:川崎修
  • インターネット大好き!
    調布周辺で自宅警備してます



    メール:pugiemonn@gmail.com
    skype:pugiemonn
    twilog:Twilog
    mixi:mixi
    facebook:facebook
My Profile by iddy
FC2ブログ

カレンダー

10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

最近の記事

Twitter

コミュニティ

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Adsense

月別アーカイブ

はてぶ数

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。