我试图在 CSS 网格系统中使用 Angular Material 。
我有这段显示两个按钮的 html 代码，一个是标准的 html 按钮，另一个使用 Angular Material 的 CSS 类:
<div class="grid">
<button mat-raised-button color="primary">ANGULAR BUTTON</button>
<button>HTML BUTTON</button>
</div>
并将这个 CSS 类添加到网格系统:
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2em;
grid-auto-rows: minmax(200px, auto);
margin: 50px;
}
这看起来工作正常，但是当我将浏览器屏幕调整为较小的宽度值时，Angular 按钮中的文本不适合按钮的容器，但标准 html 按钮的文本可以。所以我认为问题出在应用于 Angular 按钮的类中。
我怎样才能解决这个问题并在 Material 按钮上获得标准 html 按钮的行为？
带有暴露行为的图像。
最佳答案
由于Material Design guidelines按钮从未被认为是多行的，但实现这种行为并不那么复杂:将 white-space: initial; 添加到按钮样式中，您就可以开始了。 See StackBlitz example
关于css - 如何在 CSS 网格中使用 Angular Material 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48734774/