Header Text Not Wrapping JQM - css

Question

My header text looks like:
My Hea....
I want it to read
My HeaderHereTodayAndIsTooLong
What do I have to change in the jquery mobile framework/css to make this render correctly?
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h2>My HeaderHereTodayAndIsTooLong</h2>
Home
</div>

Answer 1

Wrap your h2 tags in a div, if you want the text to appear in the centre still then add a text-align style to the container div just made:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div style="text-align:center;">
<h2>My HeaderHereTodayAndIsTooLong</h2>
</div>
</div>
EDIT: To have your button appear on the right, remove the text-alignment and just apply some styles to your header to position it how desired, rough example:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div>
<h2 style="font-size:0.8em;margin-left:10px;width:70%;">My Header Here Today And Is Too Long</h2>
</div>
Home
</div>

Answer 2

You can try just overriding the margin styles that JQM adds to the hx, of course that will only buy you a bit more space, eventually if your header text is to long it will still overflow (you can of course override those styles to).
for example
.lrMarg0
{
margin-left:0px !important;
margin-right:0px !important;
}
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h2 class="lrMarg0">My HeaderHereTodayAndIsTooLong</h2>
Next
</div>