如何实现mat-expansion-panel中过长XML消息自动换行不溢出

问题根源 #

样式不生效的核心原因：

• 换行相关CSS仅添加在外层.panel容器上，但<pre>标签自带浏览器默认样式white-space: pre，默认不自动折行，外层样式优先级低于标签默认样式，无法继承生效
• 仅设置white-space无法处理无空格的连续长文本（如XML长属性值、无分隔的标签内容），这类内容会直接撑破容器边界
• Angular Material expansion panel的内部内容区.mat-expansion-panel-body自带默认内边距和布局规则，容易导致子元素宽度计算溢出

实现步骤 #

1. 模板代码不需要调整，保留<pre>标签即可（该标签可以完美保留vkbeautify格式化后的XML缩进、换行结构，比<p>标签更适合展示代码类内容）

<mat-expansion-panel class="panel">
  <pre>{{pretty(message.content)}}</pre>
</mat-expansion-panel>

2. 替换原有样式代码，重点给内部<pre>标签和Material面板内容区设置正确的换行规则：

.panel {
  max-height: 80vh;
  width: 1000px;
  overflow: auto;
}

/* 核心：pre标签换行规则 */
.panel pre {
  /* 保留预格式化的缩进、换行，同时允许内容超出宽度时自动折行 */
  white-space: pre-wrap;
  /* 兼容多浏览器的pre-wrap属性 */
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  /* 强制连续无分隔长字符串在容器边界处断行，避免撑破容器 */
  word-wrap: break-word;
  word-break: break-all;
  /* 固定pre宽度不超过父容器，内边距计算入宽度内 */
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  margin: 0;
  /* 隐藏横向溢出，不需要横向滚动条 */
  overflow-x: hidden;
}

/* 覆盖Material组件默认内容区样式，避免宽度溢出 */
.panel .mat-expansion-panel-body {
  overflow-x: hidden;
  padding: 0;
}

3. 原有的TS格式化方法不需要改动，vkbeautify生成的XML缩进、换行结构会被完整保留，长内容会自动向下排布，不会超出面板边界。

效果说明 #

• 格式化后的XML缩进、换行结构完全保留，和原pre展示效果一致
• 超长文本、无空格的长属性值会自动在面板边界处折行，不会出现横向溢出
• 内容高度超过80vh时，面板会自动出现纵向滚动条，不破坏页面布局

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