2

我有一个 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;
}
4

1 回答 1

1

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

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

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

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>

编辑角度片段

@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>

于 2018-01-10T13:14:13.007 回答