2014-09-05 2 views
1

У меня есть подразделение с заголовком и абзацем. Когда я загружаю страницу, текст накладывается так, как будто она выполняется в нижней части div и некуда идти. Мое предположение заключалось в том, что div будет расширяться вертикально по мере добавления текста к нему, но это не так (не в моем случае, по крайней мере). Важно знать, что я изменил шрифт с меньшего (Times New Roman) до большего (Грузия). После этого изменения возникла проблема с текстом. Спасибо.Почему текст в абзаце перекрывается и не создает новую строку?

<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; 
} 
+0

код вы вывесили не делать то, что вы говорите, что он делает http://jsfiddle.net/j08691/16updjny/ – j08691

+0

Вы можете добавить: семейство шрифтов: «Грузия» – muddybruin

+1

@ j08691 код будет проявляться проблема, когда вы меняете ширину div - как здесь: http://jsfiddle.net/16updjny/1/ –

ответ

2

Вы установили line-height малым. Я предполагаю, что вы считаете, что это высота между двумя строками текста, но это не так. Проверьте пример на https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

+0

Это выглядит отлично, если вы просто удалите часть линии. – muddybruin

Смежные вопросы