HTMLで改行されません

質問

下記のように書いた場合、２バイト文字（たたたたたたたたたたた～）は200pxの幅で改行して表示されますが、
１バイト文字（aaaaaaaaaaaaaaaaaaaa～）は改行されず200pxの幅を越えて表示されます。
１バイト文字も改行されるようにするにはどうしたらいいんでしょうか？

HTML-------------------------
<div id="div1">
<p>たたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
たたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

css---------------------------
#div1 {
width: 200px;
height: 300px;
background: #00ffff;
}

回答No.3

t_ohta · ベストアンサー

＞　でも２バイト文字はなんで改行するんでしょうか？
HTMLがどうと言うより、文章表記のルールが基になっているからでしょう。
英文は単語の途中で改行しないのが表記上のルールだから、基本的には改行されません。
日本語は単語の途中であっても普通に改行しますよね。（一部句読点なんかは禁則処理のルールがありますが）
それに準じているだけです。

補足

途中にspaceを入れると適当な位置で改行しますね。
まあ連続した長いアルファベットを書くことはまずないでしょうけどね。

回答No.5

ORUKA1951

間違えた
div.section p.sample.word-wrap{
word-wrap:break-word;
background-color:yellow;
}
div.section p.sample.word-break{
word-break:break-all;
border:solid red 1px;
}

回答No.4

ORUKA1951

<div class="section">
　<p class="sample word-wrap">
　　aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaたたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき
　</p>
　<p class="sample word-break">
　　aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaたたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき
　</p>
　<p class="sample word-wrap word-break">
　　aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaたたたたたたたたたたたたたたたたたたたたたたたたたききききききききききききききききききききききききききき
　</p>
</div>
div.section div.sample.word-wrap{
word-wrap:break-word;
}
div.section div.sample.word-break{
word-break:break-all;
}

補足

最初のが文字が若干ツマってますが....？？
あまり代わり映えしませんが...？？

回答No.2

outbrave

word-break: break-all;
これを追加してみてください。

補足

word-break: break-all;の場合、<p>の付いてない方が２バイト１バイトが連続します、改行もしますが...

回答No.1

t_ohta

word-wrap:break-word;
を追加したらできるかと思います。

補足

ありがとうございます。
できました。
でも２バイト文字はなんで改行するんでしょうか？

HTML CSS は不思議なことばかりだね。
ブラウザに寄っても、バージョンに寄っても違うみたいですね。