このエントリーをはてなブックマークに追加 Twitterでツイート liと○

HTMLのコーディングでちょっと深みにはまってしまったので、忘れないように書いてみる。

デザイナーさんからいただいたデザインからページテンプレートを起こす際、ダミー文字として「○」が羅列されているブロックがあり、その部分を次のようなHTMLで表現すると、

<div>
<ul>
<li>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</li>
<li>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</li>
</ul>
</div>

こんな感じになったりします(ほかにも表現できるのですが。。。)。

この「○」の文字。なぜかdivで指定した幅を超えても折り返してくれません。しかもIE7だけでなくFirefox2でも同様です。
HTMLやCSSが間違ったのかと思い、原因がわかるまでけっこうはまってしまいました。

ちなみに、「○(丸印)」だけでなく「□(四角)」も折り返さないのですが、「〇(漢数字)」はきちんと折り返します。よくわからない仕様なのですが、liタグの中で全角記号を使うのは要注意です。。。

投稿日:2008年9月3日
  • ※コメントは、スパム対策などのためIPアドレスにて制限しております。
  • ※誹謗や中傷、スパムなど、不適切な内容は公開いたしません。ご了承ください。