html - 如何在两个html标签中显示很长的内容？

Question

我有一个 Angular4 应用程序，在我的部分页面中有一个 <md-card-content>标签，我正试图在 <p> 中显示一些内容标签和 <p>有 20 厘米 max-height !

它对较短的内容有效，但对较长的内容无效!我怎样才能创建另一个 <md-card-content>如果内容的高度超过 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" id="mail">{{content}}</p>
            <p class="sign" *ngIf="!pageFull">Sincerely</p><br>
            <p class="sign" *ngIf="!pageFull">{{sender}}</p>
          </div>
        </div>
      </md-card-content>

这是我的CSS:

.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;
}

Answer 1

您可以做的是在容器上设置最大高度，然后将您的第一个段落拆分成单词。

之后，逐字逐句地插入第一段，直到该段的高度大于容器的最大高度。这意味着需要将后面的词推到第二段中。

这是一个基本的工作片段，但它给了你一个想法:

window.onload = function() {

  let p1 = document.getElementById('content-1');
  let words = p1.innerHTML.split(' ');
  let maxHeight = +document.getElementById('container-1').style.maxHeight.replace('px', '');
  p1.innerHTML = words[0];
  
  let index = -1;
  for(let i = 1; i < words.length; i++) {
    p1.innerHTML += ' ' + words[i];

    if(p1.clientHeight > maxHeight && index === -1) {
      index = i;
    }
  }

  let p2 = document.getElementById('content-2');
  let p2words = words.splice(index, words.length - index);
  p2.innerHTML = p2words.join(' ');
}

#container-1, #container-2 {
  max-width: 300px;
  border: 1px solid lightgrey;
  margin: 12px 0;
}

#content-1, #content-2 {
  line-height: 20px;
  margin: 0;
}

<div id="container-1" style="max-height: 40px; overflow: hidden;">
  <p id="content-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla nisi, facilisis posuere lectus rhoncus, posuere interdum ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae pulvinar justo, in rutrum enim. Vivamus rutrum turpis non ante molestie auctor. Pellentesque ipsum lacus, ultrices non risus sit amet, porttitor aliquam risus. Pellentesque sit amet ante vitae dolor commodo elementum. Nunc congue iaculis lectus, at tempor purus nullam.</p>
</div>
<div id="container-2">
  <p id="content-2"></p>
</div>

编辑 Angular 片段

@ViewChild('container') container: ElementRef;
@ViewChild('contentOne') c1: ElementRef;
@ViewChild('contentTwo') c2: ElementRef;

ngOnInit() {

  let p1: HTMLElement = this.c1.nativeElement;
  let words = p1.innerHTML.split(' ');
  let maxHeight = (this.container.nativeElement as HTMLElement).style.maxHeight.replace('px', '');
  p1.innerHTML = words[0];
  
  let index = -1;
  for(let i = 1; i < words.length; i++) {
    p1.innerHTML += ' ' + words[i];

    if(p1.clientHeight > maxHeight && index === -1) {
      index = i;
    }
  }

  let p1: HTMLElement = this.c2.nativeElement;
  let p2words = words.splice(index, words.length - index);
  p2.innerHTML = p2words.join(' ');
}

#container-1, #container-2 {
  max-width: 300px;
  border: 1px solid lightgrey;
  margin: 12px 0;
}

#content-1, #content-2 {
  line-height: 20px;
  margin: 0;
}

<div #container style="max-height: 40px; overflow: hidden;">
  <p #contentOne>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla nisi, facilisis posuere lectus rhoncus, posuere interdum ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae pulvinar justo, in rutrum enim. Vivamus rutrum turpis non ante molestie auctor. Pellentesque ipsum lacus, ultrices non risus sit amet, porttitor aliquam risus. Pellentesque sit amet ante vitae dolor commodo elementum. Nunc congue iaculis lectus, at tempor purus nullam.</p>
</div>
<div id="container-2">
  <p #contentTwo></p>
</div>