hail2u.net

preにoverflowを

Posted at 2003-08-02T20:07:00+09:00 in Web Design

pre要素についてで言ってたみたいに、かなりいい加減な回避策をしてたんですけど、どっちにしろ半角英数字 + 一部の記号の連続の場合ははみ出して、レイアウト崩れるわけで。floatを使ってると顕著ですね。

IE5以降の場合は、word-breakでどうにかなるんですけど、Mozillaであふれるのはどうしようもない、と。

なので、初心に返って、preにoverflowを使ってどうにかしてやろうと思ったわけですよ。以下、解決してるように見えるソース。

div.story pre {
  margin:12px 9px 12px 12px;
  padding:1em;
  border:1px solid rgb(153, 51, 51);
  width:100%;
  overflow:auto;
  color:rgb(51, 51, 51);
  background-color:rgb(251, 251, 251);
}

div.story > pre {
  margin:12px;
  width:auto;
}

BOXサイズの計算の仕方が違うので、IEが非対応なセレクタを使って、marginとwidthを上書きしてます。

微妙に見づらかったりするけど気にしない。