Css 当Angular 8中存在文本溢出时，设置文本滚动动画

我正在处理Angular 8应用程序，希望在出现这种情况时处理文本溢出。所以我想做的是，只有当屏幕上有隐藏的文本时，才会让文本从右向左滚动。如果文本适合，我不想设置动画。我想这是使用Jquery等可以轻松完成的事情，但因为我在Angular 8中工作，所以我需要一个纯css解决方案或typescript解决方案。我将在下面附加一个链接，您可以看到我现在的位置。现在我只是在为悬停上的一切设置动画。因此，在我的示例中，我只想为第一段设置动画，而不是第二段

---

我希望这是您所期待的，让我们试着评论一下

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> 

---

但是有没有一种方法不依赖于悬停呢。如果有溢油，我宁愿马上给它加动画？

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

}