[Fixed] How to reduce space between button text when new line is inserted in Angular?


I have a button with a new line inserted to break the long text of button in different lines . But there is a huge amount of space between the texts which is unwanted , i am not able to reduce the space by any means .

 <button mat-stroked-button>New <br /> Comment</button>
 <button mat-stroked-button color="primary">Comments/<br />Disposition</button>

My Buttons look like –

enter image description here

Can anyone help me in how to reduce the space between the 2 lines ?

Thanks in Advance


you need "override" the line-heigth, e.g.


If you only want to affect one button define a class like


And use

<button mat-stroked-button class="custom">..</button>

NOTE: I use only with mat-stroked-button, see the .css that is created with the differents buttons and extend the idea

Leave a Reply

(*) Required, Your email will not be published