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

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

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

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

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

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