なぜテキストがhtml構造の親要素に含まれていましたが、ブラウザの親要素があふれましたか？

Question

子要素がhtml構造の親要素に含まれていると、子要素が親要素をオーバーフローしないと考えました。したがって、テキストはp要素をオーバーフローせず、p要素に含まれます。つまり、すべてのテキストが黄色の部分に表示されます。しかし、それはしませんでした。どうして？今私はword-wrapは私の問題を解決できることを知っているが、このような状況が起こった理由を私はまた、知りたいことはあるあなたたちのためにありがとう：ここ

はmy fiddlejs

EDITているのですか？

p { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
}

 
    
 
<p>jfiaofwhefioawiofniodsauv</p>

Answer 1

使用word-wrap: break-word;ラップするということ

p { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    word-wrap: break-word; 
 
}

 
    
 
<p>jfiaofwhefioawiofniodsauv</p>

Answer 2

使用word-wrap:break-word;

p { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    word-wrap:break-word; 
 
}

<p>jfiaofwhefioawiofniodsauv</p>