Truncated text in header and footer in navbar

Truncated text in header and footer in navbar


I am using jquery-2.1.0 and

I have header html something like following:

<div data-role="header" data-position="fixed">
<div data-role="navbar">
<a class="ui-btn ui-btn-inline ui-icon-phone ui-btn-icon-left" href="../common/notifications.html">Notifications</a>

This hyperlink text 'Notifications' gets truncated on the mobile screen(I observed in chrome emulator). After reviewing css found out that css "display: block;" was causing this truncated text.

I do not want this truncation. I tried to set different values for ".ui-navbar li .ui-btn" class, but with no help.

Please suggest what value should I set to avoid truncation in my css:

.ui-navbar li .ui-btn
display: <What value???>;

Or is there any other way to achieve this?

Thanks in advance.