Lengthier text is getting truncated with <md-grid-list>

Question

Hi,

I'm new to angular material 2. I have an task of showing a dailog box using angular2. showing dailogue box is working fine. I have been using tag of material2.My dailog box has 4 columns layout which will display the key value pair of data in two columns. Among these values, I have an email field in my pop-up.Email value is getting truncated when my length of the email is more. But if I give any text with space then the ful text is being shown. I'm attaching my HTML code of pop-up/dailog box here with this.

 

Kindly, help me in having solution that, How can I show ful text for email. I tried keeping style as below, but then it did not help me in having ful text of email id. 

/deep/ .tabs-grid figure {

width: auto !important;

}

Please help me in having the proper approach to achieve this task ASAP. Also, assist me any other way I can achieve this length issue instead of using in angular2 material2 for displaying the data.


Thanks in advance.