为什么段落中的文本重叠而不是创建新行？

我有一个部门设置了标题和段落。当我加载页面时，文本会重叠，就好像它运行到div的底部一样，无处可去。我的假设是div会随着文本的添加而垂直扩展，但它不会（至少在我的情况下不是这样）。重要的是要知道我将字体从较小（Times New Roman）更改为较大（Georgia）。在这个改变之后，文本问题发生了。谢谢。为什么段落中的文本重叠而不是创建新行？

<div id="fall"> 
    <h3> Exile L'Empereur </h3> 
    <br> 
    <p> Napoleon was exiled to Elba. After Waterloo he was exiled to St. Helena. </p> 
    <p> Napoleon was exiled to Elba. After Waterloo he was exiled to St. Helena. </p> 
    <p> Napoleon was exiled to Elba. After Waterloo he was exiled to St. Helena. </p>

==============

#fall { 
    padding: 20px; 
    line-height: 5px; 
    background-image: url(../images/fleurdelis.png); 
    background-position: top right; 
    background-repeat: no-repeat; 
    background-color: #CBEDF2; 
    background-size: 64px; 
    text-align: center; 
    border-radius: 0px 15px 0px; 
    width: 500px; 
    margin-left: 20%; 
    border: 2px solid black; 
}

来源

2014-09-05 Fluxcapacitor

您发布不会做你说什么，它确实http://jsfiddle.net/j08691/16updjny/ – j08691 2014-09-05 01:53:35

您可以添加代码：FONT-FAMILY：“格鲁吉亚” – muddybruin 2014-09-05 02:07:30

@ j08691代码当你改变div的宽度时会出现问题 - 就像这里：http://jsfiddle.net/16updjny/1/ – 2014-09-05 02:09:03