动态设置 mat-expansion-panel 的高度

Question

我正在尝试使用mat-expansion-panel，但是，关于我正在处理的项目，我需要在每个面板上设置的标题长度可能会很长，并且在大多数情况下无法预测。目前，如果标题文本的长度太长，则会超出面板的范围。

我知道我可以设置 [collapsedHeight] 和 [expandedHeight] 属性来调整此行为，但是，我正在尝试寻找一种不会对值进行硬编码的解决方案。

这是一个StackBlitz，展示了我在说什么。其中，第一个扩展面板显示了当标题内容太长并且未设置 [collapsedHeight] 和 [expandedHeight] 时会发生什么。第二个扩展面板显示了当我将其设置为静态值时会发生什么 - 190px。

实现这一目标的最佳方法是什么？

Answer 1

我做了一点改动，你可以看到here。让我解释一下：

我在mat-expansion-panel-header 元素中设置了height: 100% !important;。这样你就告诉那个元素它的高度将由它内部的所有子元素（标题、描述等）设置。

并且我已经删除了margin: 10%; 在margin 或padding css 属性中使用像素而不是 % 会更好。

如果标题很大，你也可以在一行中设置一个省略号，如果你在标题中设置下一个类，你可以这样做：

.title {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}