文本溢出：省略号;不使用垫扩展面板

Question

我想将text-overflow: ellipsis;应用于mat-panel-description的mat-expansion-panel：

.mat-expansion-panel-header-description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

虽然隐藏了溢出，但没有省略号。请参阅this stackblitz的以下屏幕截图：

故意阻止包装，因为我不希望描述包裹到第二行。长URL也是有意的：

<mat-accordion>
  <mat-expansion-panel>

    <mat-expansion-panel-header>

      <mat-panel-title>
        Panel Title
      </mat-panel-title>

      <mat-panel-description>
      https://stackblitz.com/edit/angular-gsxyhn?file=app%2Fexpans ion-overview-example.html
      </mat-panel-description>

    </mat-expansion-panel-header>

  </mat-expansion-panel>
</mat-accordion>

Answer 1

我想您会发现，如果您只是将文本放在Flex容器中，您可能会遇到问题。我认为最好是你有一个容器元素来保存你的文本，并在这种情况下帮助你。

将内容放入某个容器后，there is one thing that needs to be done to get the ellipsis to show up ...将min-width: 0;添加到mat-expansion-panel-header-description类。

<span class="mat-content">
    <mat-panel-title class="mat-expansion-panel-header-title">
        <div>Panel Title</div>
    </mat-panel-title>
    <mat-panel-description class="mat-expansion-panel-header-description">
        <div>https://stackblitz.com/edit/angular-gsxyhn?file=app%2Fexpans ion-overview-example.html</div>
    </mat-panel-description>
</span>

.mat-expansion-panel-header-title {
    flex: 0 0 auto; /* make this not grow or shrink */
    margin-right: 16px;
}

.mat-expansion-panel-header-description {
    flex: 1 1 auto; /* make this grow and shrink */
    min-width: 0; /* see link to see why this is needed */
    margin-right: 16px;
}

.mat-expansion-panel-header-description > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Answer 2

我解决了该问题，更改了孩子的可见性属性。
看看here。

省略号不适用于 visibility：hidden 元素或继承此属性的任何子元素。