如何在文本高度溢出后在html中生成新标记？

Question

我有一个有角度的4应用程序，我正在使用文本编辑器！在我将数据保存到我的数据库后，我会在下面的标签中显示它！ class inner的

标签是我的文本！在css文件中我将内部类的max-height设置为20 cm！如果文本高度大于20，我希望我的文本显示在两页中厘米！就像在当前页面已满时生成新页面的Microsoft Word中一样！

这是我的HTML代码的一部分：

<md-card-content>
        <div fxLayout="row" fxLayoutAlign="center center" class="mt-1">
          <div class="template">
            <p class="head">Mail Number: {{mail_number}}</p> <br>
            <p class="head">Date: {{created_at| date:'yyyy MMM dd'}}</p>
            <p class="inner">{{content}}</p>
            <p class="sign">Sincerely</p><br>
            <p class="sign">{{sender}}</p>
          </div>
        </div>
      </md-card-content>

这是scss文件：

.template{
  width: 600px;
  height: 1100px;
  border-width: 2px;
  border-style: solid;
  border-color: #e6e6e6;
  padding-top: 23mm;
  padding-left: 2cm;
  padding-right: 2.5cm;
  //background-color: #f2f2f2;
}

p.head{
  line-height: 0.5px;
  padding-left: 120mm;
  font-size: 3;
}

p{
  line-height: 25px;
  word-spacing:1px;
}

.inner{
  text-align: justify;
  padding-top: 21mm;
  padding-bottom: 10mm;
  white-space: pre-wrap;
  max-height: 20cm;
  width: 166mm;
  word-wrap: break-word;
}

p.sign{
  padding-left: 10mm;
  line-height: 0.5px;
}