Question

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

它适用于短内容，但对于较长的内容，它不起作用！如果内容的高度超过20厘米，我该如何创建另一个<md-card-content>？我想做一些类似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

你可以做的是设置容器的最大高度，然后将你的第一个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>

EDIT Angular snippet

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

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

1 个答案:

EDIT Angular snippet