动态设置垫子扩展面板的高度

Question

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

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

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

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

Answer 1

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

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

我已经删除了margin: 10%;，最好在margin或padding css属性中使用像素代替％。

如果标题很大，您也可以在一行中制作标题并设置省略号，如果在标题中设置下一类，则可以这样做：

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