I have a mobile website I have been building and the buttons are extending off the page for buttons with longer text.

I have noticed when I used the built in columns in jquery mobile, it auto truncated buttons who's text would other wise have them extend past the page width. It did this by having the button text just have "...." at the end where it needed to cut it off.

Because of how my page is for formatting I did not want to use the double or triple columns for my page as I wanted the buttons to take up 2/3 of the page and the title to take up 1/3. The picture below will show this and the button going off the page to the right:



Here is the code for my table:

<table border=\"0\" width=\"100%\"> <tr> <td> <h3>Brewery:</h3></td> <td colspan=\"2\"> <a href=\"$breweryURL\" data-theme=\"b\" data-ajax = \"false\" data-role=\"button\">$brewery</a> </td> </tr> <tr> <td><h3>Style:</h3></td> <td colspan=\"2\"> <a href=\"$styleURL\" data-theme=\"b\" data-ajax = \"false\" data-role=\"button\">$style</a> </td> </tr> </table>