I am working on an Angular application and I need to restrict the number of characters in a paragraph (p) to 50, after which it should break to a new line.
Here is the template I am using:
<section class="echeq-element-html-display border-box"
[ngClass]="{isYoutubeVideo: isYoutubeVideo}"
[innerHTML]="doHtmlDisplay(echeqElement)"
></section>
Typescript code:
@Component({
selector: 'app-html-display',
templateUrl: './html-display.component.html',
styleUrls: ['./html-display.component.css']
})
doHtmlDisplay(eCheqElement: EcheqElement): SafeHtml {
return this.returnSafeHtml(this.getHtml(eCheqElement));
}
And here is the CSS I have applied:
p {
text-decoration: underline;
text-overflow: ellipsis; /* will make [...] at the end */
width: 50px; /* change to your preferences */
white-space: nowrap; /* paragraph to one line */
overflow: hidden; /* older browsers */
}
However, this approach is not working as expected.
What changes do I need to make to achieve the desired character limit?
Thank you
Additionally, there is a main.css file with the following style:
p {
margin: 0 0 0.75em;
}
But I only want to limit the characters in this specific component and not affect the entire application.
In my Typescript file, I currently have the following function:
truncateText(selector, maxLength) {
let element = document.querySelector(selector),
truncated = element.innerText;
if (truncated.length > maxLength) {
truncated = truncated.substr(0, maxLength) + '...';
}
return truncated;
}
And in the template, I am trying to implement it like this:
<section class="echeq-element-html-display border-box" (input)="truncateText('p', 10)" [ngClass]="{isYoutubeVideo: isYoutubeVideo}" [innerHTML]="doHtmlDisplay(echeqElement)"></section>
However, the changes are not reflecting as expected.