Hopefully, this meets your expectations. Let's give it a try and provide feedback.
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, extremely long text right here This is some long long super long, extremely long text right hereThis is some long long super long, extremely long text right here This is some long long super long, extremely long text right here This is some long long super long, extremely long text right here This is some long long super long, extremely long text right here This is some long long super long, extremely 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');
}
}