html - Angular 8中根据是否有overflow-x(水平滚动)显示和隐藏元素

Question

我有一个 Angular 应用程序。在菜单栏中，我显示了当前 routerLink 的路径。这在应用程序的某些部分可能会变得非常广泛。太宽以至于它正在创建水平滚动。我想做的是在第二次滚动出现时隐藏该路径并显示另一个元素(这将在较小的屏幕上发生)。不确定我是否应该在 ts 文件中以编程方式在纯 css och 中执行此操作。

所以我基本上想在出现 overflow-x 时删除“someclass”，而是显示“whenthereisoverflow”。我想在溢出时将链接路径移动到新的工具栏。

我不想使用媒体查询或类似的解决方案，因为路径的宽度会根据您在应用程序中的位置而变化。

<mat-toolbar>
 <div class="someclass">
    <ul>
        <li>
            <a [routerLink]="link.url">
                {{ link.url }}
            </a>
        </li> 
    </ul>
  </div>

<div>Some other content</div>
 </mat-toolbar>


<mat-toolbar class="whenthereisoverflow">
 <div>
    <ul>
        <li>
            <a [routerLink]="link.url">
                {{ link.url }}
            </a>
        </li> 
    </ul>
  </div
 </mat-toolbar>

Answer 1

试试这个:

p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<a href="#"><p>skdjfhksjdfhksjd fhksdjfhksdjfh ksjdhfksjdfhskdjfhs skdjfhsdfk skdjfhksjdfhksjd fhksdjfhksdjfh ksjdhfksjdfhskdjfhs skdjfhsdfk</p></a>