Angular Material展开面板为何将内嵌标签转为块级标签？

问题背景 #

使用Angular Material的mat-accordion和mat-expansion-panel组件时，mat-panel-description内的<i>等行内标签被渲染为块级元素，导致文本换行（比如示例中的<i>Connector</i>被单独拆成一行）。目前通过自定义CSS .mat-panel-description i { white-space: nowrap }可临时解决，但想了解是否有原生方式避免该转换行为。

错误示例代码 #

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        How To:
      </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-panel-description class="help-text">
      Start here to prepare a <i>Connector</i> to link your contract:<br>
    </mat-panel-description>
  </mat-expansion-panel>
</mat-accordion>

错误渲染结果 #

Start here to prepare a 
Connector
to link your contract.

原生解决方法：修正组件结构 #

问题核心是组件结构不符合Angular Material的设计规范：mat-panel-description是mat-expansion-panel-header的子组件，需和mat-panel-title并列放在头部区域内，而非单独放在mat-expansion-panel-header外部。

将mat-panel-description放在header外部时，它会继承错误的布局样式，导致内部行内元素被强制块级化。修正结构后，Angular Material的原生样式会自动处理行内元素布局，不会出现换行问题。

正确示例代码 #

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        How To:
      </mat-panel-title>
      <!-- 将mat-panel-description移到header内部，与title同级 -->
      <mat-panel-description class="help-text">
        Start here to prepare a <i>Connector</i> to link your contract:
      </mat-panel-description>
    </mat-expansion-panel-header>
    <!-- 此处放置面板内容区域 -->
  </mat-expansion-panel>
</mat-accordion>

补充说明 #

如果需求确实需要将描述文本放在面板内容区（而非头部），Angular Material没有原生配置可修改该布局行为，此时自定义CSS是合理的解决方案。但优先建议遵循组件官方结构设计，能避免大部分样式兼容问题。

内容的提问来源于stack exchange，提问作者GGizmos