I thought that if child element is included in parent element in the html structure, child element won't overflow parent element. So the text won't overflow the p element and will included in the p element which means that all the text will be displayed in the yellow part. But it didn't. Why?

here is [my fiddlejs](https://jsfiddle.net/Ljo70vt7/)

**EDIT :** Thanks for you guys that now I know that `word-wrap` can solve my problem, but what I also want to know is why this kind of situation happened?

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

```html

<p>jfiaofwhefioawiofniodsauv</p>
```