text-overflow: ellipsis; 在 mat-expansion-panel 中无法正常工作

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的以下截图：

防止换行是有意为之的，因为我不希望描述文字换到第二行。长网址也是有意的：

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

- Jack

---

如果在元素上设置 display: inline-block;，它似乎可以正常工作（请参见此Stackblitz）。 - ConnorsFan

你应该将渲染后的标记和 CSS 提交到上面几个级别。 - Stickers

Answer 1

我认为你会发现，如果只将文本放在 flex 容器中，可能会遇到问题。最好使用容器元素来容纳您的文本，并在这种情况下帮助您。

一旦内容被放置在某个容器中，有一件事需要做才能显示省略号... 将 mat-expansion-panel-header-description 类的 min-width: 0; 添加进去即可。

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

- Daniel W Strimpel

---

哇，这太棒了，谢谢。我把所有内容合并到了扩展面板标题中，对我的用例来说效果非常完美。 - Gabe Karkanis

Answer 2

我通过更改子元素的可见性属性来解决了这个问题。
请看这里。

省略号不会在visibility: hidden元素或任何继承此属性的子元素上起作用。

- Eloy Ruiz