html - コンテンツがまだオーバーフローしている間、divの幅は修正されます

Question

ここでHTMLコードについて質問したいのですが、divのサイズ設定に関して少し問題があります。divの幅を70pxに設定すると、コンテンツはまだdivをオーバーフローします。必要なのは、コンテンツがdivの幅を超えると、divの高さが自動的に調整されることです。

何か助けはありますか？ここに私のコードがあります。前もって感謝します

<div class = "center"> the quick brown fox jumps over the lazy dog.the quick brown fox jumps over the lazy dog.the quick brown fox jumps over the 
lazy dog.the quick brown fox jumps over the lazy dog.the quick brown fox jumps over the lazy dog.the quick brown fox jumps 
over the lazy dog.the quick brown fox jumps over the lazy dog.the quick brown fox jumps over the lazy dog.the quick brown 
fox jumps over the lazy dog.the quick brown fox jumps over the lazy dog.the quick brown fox jumps over the lazy dog.the 
quick brown fox jumps over the lazy dog.the quick brown fox jumps over the lazy dog.the quick brown fox jumps over the lazy 
dog.the quick brown fox jumps over the lazy dog. </div>

<style> .center{width:70px;} </style>

Answer 1

このCSSを試してください

.center
 {
    width:70px;
    word-wrap: break-word;
 } 

ブラウザに単語を壊すように強制します。そうしないと、コンテナを壊してしまいます。

Answer 2

あなたが説明する望ましい動作はデフォルトの動作です（証明）-そのように機能しない場合は、この動作を妨げるスタイルがいくつかあるので、それらを排除してみてください。

また、<style>タグは頭に配置する必要があり、本文には許可されていないことに注意してください (正確に言うと、HTML5 には属性scopedがありますが、atm はブラウザーでのサポートが非常に不十分です)。

Answer 3

次の属性をCSSクラスに追加します

overflow: auto;