文本溢出：省略号；不适用于垫子扩展面板答案

【问题标题】：text-overflow: ellipsis; not working with mat-expansion-panel文本溢出：省略号；不适用于垫子扩展面板
【发布时间】：2018-11-13 03:23:58
【问题描述】：

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

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

虽然溢出被隐藏，但没有省略号。看下面this stackblitz的截图：

故意阻止换行，因为我不希望描述换行到第二行。长网址也是故意的：

<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>

【问题讨论】：

如果在元素上设置display: inline-block; 似乎可以工作（请参阅this stackblitz）。
您应该将渲染的标记和 css 发布上几个级别。

标签： css angular angular-material

【解决方案1】：

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

将内容放入某个容器后，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;
}

【讨论】：

哇，这太棒了，谢谢。我将所有内容合并到扩展面板标题中，它非常适合我的用例。

【解决方案2】：

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

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

【讨论】：