I want to wrap an XML message in a mat-expansion-panel if it's too long so it continues down instead of going beyond the panel.
<mat-expansion-panel class="panel">
<pre>{{pretty(message.content)}}</pre>
</mat-expansion-panel>
.panel {
max-height: 80vh;
width: 1000px;
overflow: auto;
}
pretty(message: string) {
return vkbeautify.xml(message);
}
I've tried using white-space, word-break, wrapping the message in <p> tag and setting the width to 85% but all these things didn't seem to do anything.
Target to pre tag
.panel pre {
max-height: 80vh;
width: 1000px;
overflow: auto;
}