Is there a property related to the Angular button to be set to resize the inserted text?-CodePudding

I'm using a mat-grid-list to reproduce a matrix. I would like to insert text into a button and display it on multiple lines when the size exceeds the outer space. Is there any property to set? Thanks for your help!

Reproduction: https://stackblitz.com/edit/grid-list-with-buttons?file=src/app/grid-list-dynamic-example.html

Expected result: resized text

CodePudding user response：

Just add white-space: normal; at the button style.

<button mat-button style="background-color: #0000ff; color: #fff; white-space: normal; " >
  {{tile.text}}
</button>