英文:
Angular Material Expansion Panel turns all embedded tags into block tags?
问题
如果我有一个看起来像这样的文档：
<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.
对于<span>标签、<bold>等标签也是同样的情况。您可以通过在CSS中添加.mat-panel-description i { white-space: nowrap }来防止这种行为，但似乎应该有一种方法来防止mat-panel-description标签将内联标签转换为块标签。
英文:
If I have document that looks like this:
<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>
What gets render is something like:
Start here to prepare a
Connector
to link your contract.
It does the same thing with <span> tags, <bold> etc. I can prevent the behavior by adding: .mat-panel-description i { white-space: nowrap } in the .css, but seems like there ought to be a way to prevent conversion of inline tags into block tags by the mat-panel-description tag.
}`
答案1
得分: 0
我刚刚检查了mat-expansion-panel-content中的默认样式，其中包括：
.mat-expansion-panel-content {
display: flex;
align-items: center;
}
所以基本上将您的内容包裹在一个"div"中将防止这种行为。
英文:
I just checked default styles in mat-expansion-panel-content, and there is
.mat-expansion-panel-content {
display: flex;
align-items: center;
}
So basicaly wrapping your content inside a "div" will prevent that behavior.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论