line break in Jquery Mobile button does not fit to button height

Question

I'm adding 2 buttons in Jquery Mobile with text, each button takes half of the screen (horizontal).

<div>
    <a href="index.html" data-role="button" style="float:right;width:40%;">text a</a>
    <a href="index.html" data-role="button" style="float:left;width:40%;">text b,text b</a> 
</div>

When text in button is long text, I get a button with part of the text like that :

"text b,te..."

How can I force the button to change the button height or break line so the text will fit the weight button and all the text will seen.

Answer 1

For jQM 1.4 you can just apply white-space: normal in CSS to the anchor element:

<div class="ui-grid-a">
  <div class="ui-block-a"><a href="index.html" data-role="button" >text a</a></div>
  <div class="ui-block-b"><a href="index.html" data-role="button" >text b,text b</a>   </div>
</div>  

a {
    white-space: normal !important;
}

jQM 1.4 DEMO

For jQM 1.3, the CSS is aplied to the .ui-btn-inner span of the anchor:

a .ui-btn-inner {
    white-space: normal !important;
}

jQM 1.3 DEMO