I'm working on an Angular 8 application and want to handle text-overflow when there is such. So what I'm trying to do is to make the text scroll from right to left only WHEN there is any hidden text that wont fit the screen. If the text fits I do not want to animate it. I presume this is something you can easily do using Jquery etc but since I'm working in Angular 8 I need a pure css solution or a typescript solution. I'll attach a link below where you can see where I am at this point. Right now I'm just animating everything on hover. So In my example I only want to animate the first paragraph and not the second one.
1 Answer
I hope this is what you have expecting, let's try and comment.
app.component.css
.text {
overflow: hidden;
}
p {
text-align: center;
white-space: pre;
transition: 30s;
}
app.component.html
<div class="text" #parentTag (mouseenter)="move()" (mouseleave)="stop()">
<p #target >This is some long long super long, extremly long text right here This is some long long super long, extremly long text right hereThis is some long long super long, extremly long text right here This is some long long super long, extremly long text right here This is some long long super long, extremly long text right here This is some long long super long, extremly long text right here This is some long long super long, extremly long text right here
</p>
<div>
app.component.ts
import { Component, ElementRef,Renderer, ViewChild, Renderer2 } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
left = 0;
@ViewChild('parentTag', {static: false})
parentTag: ElementRef;
@ViewChild('target', {static: false})
target: ElementRef;
constructor(private el:ElementRef, private renderer: Renderer2){
}
move(){
console.log(this.parentTag.nativeElement.clientWidth);
console.log(this.target.nativeElement.scrollWidth);
let left = this.target.nativeElement.scrollWidth -
this.parentTag.nativeElement.clientWidth;
this.renderer.setStyle(this.target.nativeElement, 'margin-left', '-'+left+'px');
}
stop(){
this.renderer.setStyle(this.target.nativeElement, 'margin-left', '0px');
}
}
1 Comment
indd
But is there a way where it isn't depended on hover. I'd rather it animated right away if there is overflow?