What is the best way to display lengthy content using a pair of HTML tags?

Question

What is the best way to display lengthy content using a pair of HTML tags?

I am facing an issue with my Angular4 app where I have a <md-card-content> tag on part of my page. Inside this tag, I am trying to display some content within a <p> tag which has a maximum height of 20cm.

While this setup works fine for short content, it fails to accommodate longer content. Is there a way to dynamically create another <md-card-content> if the content exceeds 20cm in height? My goal is to replicate the behavior of Microsoft Word, moving to a new page when the current one is full!

Here is a snippet of my HTML code:

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

Below is the relevant CSS code from my stylesheet:

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

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

html css angular md-card

Answer 1

Answer №1

To achieve this, you can apply maximum height constraints on the containers and then break down your initial paragraph into individual words.

Next, start adding one word at a time to your first paragraph until its height surpasses the maximum height of the container. Once this happens, the remaining words should be moved to the second paragraph.

Below is a simple snippet that demonstrates this concept:

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') content1: ElementRef;
@ViewChild('contentTwo') content2: ElementRef;

ngOnInit() {

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

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

  let paragraph2: HTMLElement = this.content2.nativeElement;
  let leftoverWords = words.splice(index, words.length - index);
  paragraph2.innerHTML = leftoverWords.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>

Answer 2

To achieve this, you can apply maximum height constraints on the containers and then break down your initial paragraph into individual words.

Next, start adding one word at a time to your first paragraph until its height surpasses the maximum height of the container. Once this happens, the remaining words should be moved to the second paragraph.

Below is a simple snippet that demonstrates this concept:

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') content1: ElementRef;
@ViewChild('contentTwo') content2: ElementRef;

ngOnInit() {

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

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

  let paragraph2: HTMLElement = this.content2.nativeElement;
  let leftoverWords = words.splice(index, words.length - index);
  paragraph2.innerHTML = leftoverWords.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>

What is the best way to display lengthy content using a pair of HTML tags?

Answer №1

EDIT Angular snippet

Similar questions

Issues with the functionality of Angular Material prebuilt themes are causing inconsistencies

Display a jQuery loading window

Creating a webpage that utilizes varying headers for each section can help to

jQuery Slider Showing Incorrect Images

Steps for inserting an image:

Updating the HTML class with JavaScript

Firebase Authentication error code "auth/invalid-email" occurs when the email address provided is not in a valid format, triggering the message "The email address is

Update the 'checked' attribute of a radio button when the form is submitted

Rendering in Angular 2 is exclusively done through the use of arrow functions

Bringing in typefaces to enhance your email signature

What is the best way to add custom styles to Material UI tabs in a React application?

specific css styles only for Safari and Internet Explorer

Uploading files with Angular and NodeJS

Are checkboxes embedded within labels?

Preventing Component Reuse in Angular 2 RC2 version "2.0.0-rc.2 (2016-06-15)"

What could be causing the malfunction of this Bootstrap button dropdown?

Executing a function in Angular depending on the values emitted by two distinct observables

Filling MatTables using asynchronous rows and promises

The HTML 5 Validation is unsuccessful due to the presence of the "Attribute addthis:url not allowed on element a at this point." error

What is the best way to ensure that the table header is printed on every page when printing?