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

Question

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

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

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

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

Answer 1

我做了一点改变，你可以在这里看到。让我解释：

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

我已经删除了margin: 10%;最好使用像素而不是 % inmargin或paddingcss 属性。

您还可以将标题放在一行中，如果标题很大，则设置省略号，如果您在标题中设置下一类，则可以这样做：

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