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

【问题标题】：Why does text in paragraph overlap and not create a new line?为什么段落中的文本重叠而不创建新行？
【发布时间】：2015-08-19 22:47:14
【问题描述】：

我有一个带有标题和段落的部门。当我加载页面时，文本重叠，好像它运行到 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;
 }

【问题讨论】：

您发布的代码并没有像您所说的那样执行jsfiddle.net/j08691/16updjny
可以加：font-family: "Georgia"
@j08691 代码会在您更改 div 的宽度时出现问题 - 就像这里：jsfiddle.net/16updjny/1
您需要了解行高的工作原理。如果您有段落 - 行高将是总高度，包括您的文本将在行尾开始换行时的字体。如果你有单独的段落，它们周围会有正常的边距，行高不会影响那么大。

标签： html paragraph

【解决方案1】：

您已将line-height 设置为小。我假设您认为它是两行文本之间的高度，但事实并非如此。查看https://developer.mozilla.org/en-US/docs/Web/CSS/line-height的示例

【讨论】：

删除行高部分就好了。

【解决方案2】：

设置段落的对齐方式。增加文本的边距。

要了解有关段落的更多信息，请访问链接。

http://entertainment7899.blogspot.com/2015/08/how-to-create-paragraph-with-html.html

【讨论】：